javascript动态添加select的option两种方法

小灰灰 2021-02-05 02:14 852阅读 0赞

````
<!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