javascript動態新增select的option兩種方法
阿新 • • 發佈：2019-01-28
<!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" onchange="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>
<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" onchange="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