js下拉列表级联案例
下面是省市级联菜单的Demo
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var arr = new Array(2);
arr[0] = ["漯河", "郑州", "洛阳", "三门峡", "灵宝", "登封"];
arr[1] = ["保定", "石家庄", "邢台", "邯郸", "承德", "秦皇岛"];
arr[2] = ["济南", "青岛", "菏泽", "济宁", "潍坊", "烟台", "德州"];
arr[3] = ["朝阳区", "海淀区", "昌平区"];
document.getElementById("province").onchange = function() {
var index = this.value;
var cityArr = arr[index];
document.getElementById("city").innerHTML = " <option >--请-选-择-市--</option> ";
for(var i = 0; i < cityArr.length; i++) {
var cityName = cityArr[i];
var option = document.createElement("option");
var text = document.createTextNode(cityName);
option.appendChild(text);
var select = document.getElementById("city");
select.appendChild(option);
}
}
}
</script>
</head>
<body>
省份:
<select id="province">
<option value="">----请-选-择-省----</option>
<option value="0">河南省</option>
<option value="1">河北省</option>
<option value="2">山东省</option>
<option value="3">北京市</option>
<option value="4">浙江省</option>
<option value="5">上海市</option>
</select>
市区:
<select id="city">
<option value="">----请-选-择-市----</option>
</select>
</body>