动态获取select中的options数量:
Var size = document.getElementById("ddlResourceType").options.length;
动态删除select中的所有options:
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option:
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面在IE和FireFox都能测试成功,希望以后你可以用上。
其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。
取值方面
function getvalue(obj)
{
var m=obj.options[obj.selectedIndex].value
alert(m);//获取value
var n=obj.options[obj.selectedIndex].text
alert(n);//获取文本
}
==============================================================================
1 检测是否有选中
if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}
将option设为选中:document.getElementById("province").options.selected = true;
2 删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;
3 增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;
6 得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;
7.所选择项设置为选中
objSelect.options[objSelect.selectedIndex].selected = true;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>城市区域4级下拉框</title>
<script>
function f1(v){
//alert(v);
//清除后面的项
document.getElementById("object2").options.length=0
document.getElementById("object3").options.length=0
document.getElementById("object2").style.display="none";
document.getElementById("object3").style.display="none";
var s = document.getElementById("object1");
if(v=="北京"){
var option0 = new Option("东城区","a1");
var option1 = new Option("西城区","a2");
var option2 = new Option("朝阳区","a3");
s.options[0] = option0;
s.options[1] = option1;
s.options[2] = option2;
}else if(v=="上海"){
var option0 = new Option("浦东新区","b1");
var option1 = new Option("闵行区","b2");
var option2 = new Option("徐汇区","b3");
s.options[0] = option0;
s.options[1] = option1;
s.options[2] = option2;
s.options[2].selected = true;
}else if(v=="广州"){
var option0 = new Option("天河区","c1");
var option1 = new Option("越秀区","c2");
var option2 = new Option("海珠区","c3");
s.options[0] = option0;
s.options[1] = option1;
s.options[2] = option2;
}
//显示出来
document.getElementById("object1").style.display="";
}
function f2(v){
//alert(v);
//清除后面的项
document.getElementById("object3").options.length=0
document.getElementById("object3").style.display="none";
var s = document.getElementById("object2");
if(v=="b1"){
var option0 = new Option("陆家嘴","a1");
var option1 = new Option("东方明珠","a2");
s.options[0] = option0;
s.options[1] = option1;
}else if(v=="b2"){
var option0 = new Option("浦江镇","b1");
var option1 = new Option("梅陇镇","b2");
s.options[0] = option0;
s.options[1] = option1;
}else if(v=="b3"){
var option0 = new Option("田林镇","c1");
var option1 = new Option("徐家汇","c2");
s.options[0] = option0;
s.options[1] = option1;
}
//显示出来
document.getElementById("object2").style.display="";
}
function f3(v){
//alert(v);
var s = document.getElementById("object3");
if(v=="c1"){
var option0 = new Option("田林路","a1");
var option1 = new Option("漕宝路","a2");
s.options[0] = option0;
s.options[1] = option1;
}else if(v=="c2"){
var option0 = new Option("肇嘉浜路","b1");
var option1 = new Option("华山路","b2");
s.options[0] = option0;
s.options[1] = option1;
}
//显示出来
document.getElementById("object3").style.display="";
}
</script>
</head>
<body>
<select name="select1" onChange="f1(this.value);">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<select id="object1" name="select2" onChange="f2(this.value);" style="display:none ">
</select>
<select id="object2" name="select3" onChange="f3(this.value);" style="display:none ">
</select>
<select id="object3" name="select4" style="display:none ">
</select>
</body>
</html>
分享到:
相关推荐
jQGrid动态填充select下拉框的选项值(动态填充)
select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demo
html最全的js javascript操作select 下拉框
当下拉菜单选项比较多的时候,select下拉列表内容过多,在IE中默认是30条选项,firefox默认是20条, 超过自动出现滚动条,但是在没出现滚动条时候样式特别不...本次上传的代码将提供一种方法将select下拉框添加滚动条
select 下拉框可以多选Demo事列.
js 操作select 下拉框js 操作select 下拉框
尽管现在的浏览器更新换代后更加强大,浏览器默认控件也逐渐变得美观起来,特别是Select下拉框,已经不再是以前IE6那样的丑陋了。但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件,它完全重写了...
jQuery select下拉框美化代码基于jquery.1.10.2.min.js制作,点击下拉框,显示下拉框内容。
select下拉框支持搜索【中文搜索】文件
js+ajax 实现select下拉框无限级动态添加,代码简洁方便,哥想了很久才做出来的,欢迎使用
带搜索功能的select下拉框,类似百度google的搜索框,自己匹配,很好用
jQuery插件—mcdropdow仿多层次的下拉框插件。把鼠标移到下拉框上,然后点击下拉框的按钮,你就会发现神奇之处,注意,有点小遗憾,下拉输入框并不能选择,只能点击右侧的箭头选择内容,不过这问题可以解决,你把...
里面提供 并解决所有获得select下拉框里面的值 很有帮助
jQuery Editable Select 是一个jQuery插件,它将选择转换成输入字段,其中根据输入的字符实时显示单个元素。当JavaScript不可用时,它就变成了一个真正的选择列表。
JQ JS javascript 多选 多选下拉框 select bootstrap-select
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
JQ JS javascript bootstrap 带搜索 下拉框 select
select下拉框,按下空格键后让它的选项显示出来,按回车键选中值
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
select下拉框可编辑输入框 select下拉框可编辑输入框 select下拉框可编辑输入框