<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<body>
<select id="sec1">
<option value="1">选择</option>
<option value="2">河南省</option>
<option value="3">韩国</option>
</select>
<select id="sec2">
<option value="1">选择</option>
</select>
<script type="text/javascript">
//分别声明对应省份的城市,并将其放进数组
var hnArray = ["郑州", "南阳", "开封","商丘", "漯河"];
var koreaArray = ["首尔", "釜山", "济州岛"];
//分别获取两个下拉框
var sel1 = document.getElementById("sec1");
var sel2 = document.getElementById("sec2");
//给第一个下拉框添加onchange事件,当其里的内容发生改变时该事件被触发.
sel1.onchange = function(){
//每次重新选择省份时,需要把之前的城市清掉.
//element.children 获取到的是对应节点下的所有的元素子节点.
// console.log(sel2.children);
for(var i = 0; i < sel2.children.length; i++){
sel2.removeChild(sel2.children[i]);
i--;
}
//根据第一个下拉框的省份去对应创建一定数量的option标签.
// console.log(sel1.value);
if(sel1.value == 1){
var op = document.createElement("option");
op.innerHTML = "选择";
sel2.appendChild(op);
}
//选择河南
if(sel1.value == 2){
for(var i = 0; i < hnArray.length; i++){
var op = document.createElement("option");
op.innerHTML = hnArray[i];
sel2.appendChild(op);
}
}
//选择韩国
if(sel1.value == 3){
for(var i = 0; i < koreaArray.length; i++){
var op = document.createElement("option");
op.innerHTML = koreaArray[i];
sel2.appendChild(op);
}
}
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
