JS动态逐级添加select下拉框-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_13654/article/details/82299775

动态获取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;

例子：代码
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2."http://www.w3.org/TR/html4/loose.dtd">
3.<html>
4.<head>
5.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6.<title>城市区域4级下拉框</title>
7.<script>
8. function f1(v){
9. //alert(v);
10. //清除后面的项
11. document.getElementById("object2").options.length=0
12. document.getElementById("object3").options.length=0
13. document.getElementById("object2").style.display="none";
14. document.getElementById("object3").style.display="none";
15.
16.
17. var s = document.getElementById("object1");
18. if(v=="北京"){
19. var option0 = new Option("东城区","a1");
20. var option1 = new Option("西城区","a2");
21. var option2 = new Option("朝阳区","a3");
22. s.options[0] = option0;
23. s.options[1] = option1;
24. s.options[2] = option2;
25. }else if(v=="上海"){
26. var option0 = new Option("浦东新区","b1");
27. var option1 = new Option("闵行区","b2");
28. var option2 = new Option("徐汇区","b3");
29. s.options[0] = option0;
30. s.options[1] = option1;
31. s.options[2] = option2;
32. s.options[2].selected = true;
33.
34. }else if(v=="广州"){
35. var option0 = new Option("天河区","c1");
36. var option1 = new Option("越秀区","c2");
37. var option2 = new Option("海珠区","c3");
38. s.options[0] = option0;
39. s.options[1] = option1;
40. s.options[2] = option2;
41. }
42. //显示出来
43. document.getElementById("object1").style.display="";
44. }
45.
46. function f2(v){
47. //alert(v);
48. //清除后面的项
49. document.getElementById("object3").options.length=0
50. document.getElementById("object3").style.display="none";
51.
52. var s = document.getElementById("object2");
53. if(v=="b1"){
54. var option0 = new Option("陆家嘴","a1");
55. var option1 = new Option("东方明珠","a2");
56. s.options[0] = option0;
57. s.options[1] = option1;
58. }else if(v=="b2"){
59. var option0 = new Option("浦江镇","b1");
60. var option1 = new Option("梅陇镇","b2");
61. s.options[0] = option0;
62. s.options[1] = option1;
63. }else if(v=="b3"){
64. var option0 = new Option("田林镇","c1");
65. var option1 = new Option("徐家汇","c2");
66. s.options[0] = option0;
67. s.options[1] = option1;
68. }
69. //显示出来
70. document.getElementById("object2").style.display="";
71. }
72.
73. function f3(v){
74. //alert(v);
75. var s = document.getElementById("object3");
76. if(v=="c1"){
77. var option0 = new Option("田林路","a1");
78. var option1 = new Option("漕宝路","a2");
79. s.options[0] = option0;
80. s.options[1] = option1;
81. }else if(v=="c2"){
82. var option0 = new Option("肇嘉浜路","b1");
83. var option1 = new Option("华山路","b2");
84. s.options[0] = option0;
85. s.options[1] = option1;
86. }
87. //显示出来
88. document.getElementById("object3").style.display="";
89. }
90.</script>
91.</head>
92.
93.<body>
94.<select name="select1" onChange="f1(this.value);">
95.<option value="北京">北京</option>
96.<option value="上海">上海</option>
97.<option value="广州">广州</option>
98.</select>
99.<select id="object1" name="select2" onChange="f2(this.value);" style="display:none ">
100.</select>
101.<select id="object2" name="select3" onChange="f3(this.value);" style="display:none ">
102.</select>
103.<select id="object3" name="select4" style="display:none ">
104.</select>
105.</body>
106.</html>
<!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>