<html>
<head>
<title>添加与删除Option对象</title>
<script language="javascript">
// 添加选项
function addOption(pos){
var objSelect = document.myForm.mySelect;
// 取得字段值
var strName = document.myForm.myOptionName.value;
var strvalue = document.myForm.myOptionvalue.value;
// 建立Option对象
var objOption = new Option(strName,strvalue);
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}
// 删除选项
function deleteOption(type){
var objSelect = document.myForm.mySelect;
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(objForm){
var objSelect = objForm.mySelect;
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}
</script>
</head>
<body>
<h2>添加与删除Option对象</h2>
<hr>
<form name="myForm">
<select name="mySelect">
<option value="中国" Selected>中国</option>
<option value="日本">日本</option>
<option value="美国">美国</option>
</select>
<input type="button" onclick="showOption(this.form)" value="显示">
<input type="button" onclick="deleteOption(true)" value="删除">
<input type="button" onclick="deleteOption(false)" value="Remove方法"><br><br>
选项名称 : <input type="text" name="myOptionName" value="英国"><br>
选项的值 : <input type="text" name="myOptionvalue" value="value4">
<input type="button" onclick="addOption(-1)" value="添加">
<input type="button" onclick="addOption(0)" value="插入">
</form>
</body>
</html>
分享到：
相关推荐
select下拉框列表实现图片内容显示，$("#***").select()格式
NULL 博文链接：https://jyao.iteye.com/blog/579409
1.动态创建select 代码如下: ...添加选项option 代码如下: function addOption(){ //根据id查找对象， var obj=document.getElementById(‘mySelect’); //添加一个选项 obj.add(new Option(“文本”,”值”)); /
select多选下拉列表+模糊查询功能，亲测完整，有ASP和HTML样例，代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"></script> ...
js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码
select 下拉列表 下拉列表显示图片
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
Select下拉列表框CssJavascriptCssJavascriptCssJavascript
主要介绍了JS中Select下拉列表类(支持输入模糊查询)功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
今天特意给大家推荐一款可以美化select下拉列表的插件——jquery.custom-select.js 只有十几KB大小，完全不影响网速加载 使用方法： 1、将head中的css样式引入到你的页面中 2、将body中的代码部分...
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
jQuery Stylish Select 是一款jQuery Select下拉列表外观自定义插件,把Select下拉框美化成圆角的样式,另外颜色也不一样了,下拉列表中每个item的背景色也添加了.本Select美化用到了jquery了，在最新的jquery版本下未...
jq重置select 下拉列表 很简单 重置可以自定义到哪一项
简单的例子，点击按钮就删除掉option，也可以通过jquery加载的时候进行删除。
纯CSS3表单SELECT下拉列表效果，可以在苹果，安卓使用，比安卓默认下拉列表好看多了
JS+CSS和图片美化select下拉列表选择框
这是一款效果超赞的jQuery和css3 select下拉列表框美化插件。该下拉列表美化插件没有使用图片，纯css和一点jQurey打造。共有5中不同的select下拉列表框效果。
NULL 博文链接：https://fukaijian.iteye.com/blog/1871190