由两个select ,其中一个变化,另外一个的内容也会随之变化(菜鸟...)请高手指正
下面是html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
省
<select name="">
<option value="0">--请选择--</option>
<option value="1">河南</option>
<option value="2">北京</option>
</select>
市
<select name="">
<option value="">--请选择--</option>
</select>
<script type="text/javascript">
//数据
var arr1 = ["郑州","洛阳","开封","新乡"];
var arr2 = ["东京","洛阳","开封","新乡"]
//获取元素
var select1 =document.querySelector("select");
var select2 = select1.nextElementSibling;
//关联方法
select1.onchange =function(){
//清空操作
for (var i=1;i<select2.children.length; i++) {
var opt1 =select2.children[i];
select2.removeChild(opt1)
i--;
}
//如果是河南
if (select1.value == "1") {
for (var i=0; i<arr1.length; i++) {
//循环一次创建option
var opt = document.createElement("option")
opt.innerHTML= arr1[i];
//插入到select2中
select2.appendChild(opt);
}
}
if (select1.value == "2") {
for (var i=0; i<arr2.length; i++) {
var opt = document.createElement("option");
opt.innerHTML= arr2[i];
select2.appendChild(opt);
}
}
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/lyan123/p/5655931.html