javascript动态添加select的option两种方法_js添加select option-优快云博客

本文链接：https://blog.youkuaiyun.com/liuwenliang_002/article/details/78820048

本文介绍了一个使用JavaScript实现的动态下拉框选择器示例。当用户选择不同的选项时，第二个下拉框的内容会根据所选内容进行更新。通过Object和Array两种方式展示了如何动态填充下拉选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function changeTest(obj){
var selectVal = obj.value;
if(selectVal == "one"){
var objSelectet = document.getElementById("testTwo");
for(i=objSelectet.options.length-1 ; i>= 0 ; i--){
objSelectet.options[i] = null;
objSelectet.innerHTML = "<option value = ''>请选择</option>";
}
//Object实现动态下拉框
var texts = {
one : "opt1",
two : "opt2",
three : "opt3"
}
console.log(texts);
var objKeys=Object.keys(texts);
var objValues = Object.values(texts);
for(var i = 0 ; i < objKeys.length ; i++){
var objOption = document.createElement("OPTION");
objOption.text= objValues[i];
objOption.value=objValues[i];
objSelectet.options.add(objOption);
}
}else if(selectVal == "two"){
var objSelectet = document.getElementById("testTwo");
for(i=objSelectet.options.length-1 ; i>= 0 ; i--){
objSelectet.options[i] = null;
objSelectet.innerHTML = "<option value = ''>请选择</option>";
}
//Array事项动态下拉框
var texts = new Array("one","two","three","four");
var values = new Array("one","two","three","four");
for(var i = 0 ; i < texts.length ; i++){
var objOption = document.createElement("OPTION");
objOption.text= texts[i];
objOption.value=values[i];
objSelectet.options.add(objOption);
}
}else{
var objSelectet = document.getElementById("testTwo");
//从后面向前面删除
for(i=objSelectet.options.length-1 ; i>= 0 ; i--){
objSelectet.options[i] = null;
objSelectet.innerHTML = "<option value = ''>请选择</option>";
}
}
}

</script>
</head>
<body>
<form>
<tr>
<td>select测试</td>
<td>
<select id = "testOne" οnchange="changeTest(this)">
<option value = "">请选择</option>
<option value = "one">one</option>
<option value = "two">two</option>
</select>
</td>
</tr>
<br />
<tr>
<td>关联select</td>
<td>
<select id = "testTwo">
<option value = "">请选择</option>
</select>
</td>
</tr>
</form>
</body>
</html>

html