css实现动态下拉框 |当当网 注册 css

<select id="select1">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
<select id="select2"></select>

首先大家需要一个基础的下拉框，代码如上所示。接下来，大家需要根据第一个下拉框的选项来动态生成第二个下拉框的选项。代码如下：

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select1.onchange = function(){
//清空第二个下拉框原有的选项
select2.options.length = 0;
//根据选中的选项值来动态生成选项
var value = select1.value;
var arr = [];
switch(value){
case "1":
arr = ["选项1-1","选项1-2","选项1-3"];
break;
case "2":
arr = ["选项2-1","选项2-2","选项2-3"];
break;
case "3":
arr = ["选项3-1","选项3-2","选项3-3"];
break;
case "4":
arr = ["选项4-1","选项4-2","选项4-3"];
break;
}
//循环生成选项
for(var i=0;i<arr.length;i++){
var option = document.createElement("option");
option.text = arr[i];
select2.add(option);
}
}

如上代码所示，大家需要获取第一个下拉框和第二个下拉框的元素并为第一个下拉框添加一个change事件，当第一个下拉框的选项改变时，大家需要先清空第二个下拉框的选项，再根据第一个下拉框选中的选项值来动态生成选项，并将它们添加到第二个下拉框中，从而实现动态下拉框。