javaScript实现级联下拉列表
代码如下
<head>
<meta charset="UTF-8">
<title>级联下拉</title>
</head>
<body>
<select id="province" onchange="handleChange()">
<option value="0">河南</option>
<option value="1">河北</option>
<option value="2">山东</option>
<option value="3">山西</option>
</select>
<select name="" id="city">
<option value="0">郑州</option>
<option value="1">洛阳</option>
<option value="2">南阳</option>
<option value="3">安阳</option>
</select>
</body>
<script>
var a0=["郑州","洛阳","南阳","安阳"];
var a1=["石家庄","保定","承德","邯郸"];
var a2=["济南","青岛","菏泽","枣庄"];
var a3=["太原","晋城","吕梁","长治"];
var a=[a0,a1,a2,a3];
function handleChange() {
var proDom=document.querySelector("#province");
//a[prodom.value]//获取省份对应的城市数组
var html="";
for (var i=0;i<a[proDom.value].length;i++){
html+='<option value="'+i+'">'+a[proDom.value]
[i]+'</option>';
}
console.log(html);
var cityDom=document.querySelector("#city");
city.innerHTML=html;
}
</script>
