引用场景特别多,特别是省份-城市之间的对应
<!DOCTYPE HTML>
<html>
<head>
<title>09-二级联动.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var china = {
"provinces":[{
"name" : "吉林省",
"city" :["长春","吉林市","四平","松原","通化"]
},{
"name" : "辽宁省",
"city" :["沈阳","大连","鞍山","抚顺","铁岭"]
},{
"name" : "山东省",
"city" :["济南","青岛","威海","烟台","潍坊"]
},{
"name" : "上海市",
"city" :["闵行区","徐汇区"]
},{
"name" : "安徽省",
"city" :["合肥市","六安市"]
}]
};
window.onload = function () {
/*第一步:将各个省份添加到province 这个select中*/
// 获取省份的下拉框
var provSelect = document.getElementById("province");
// 获取各个省份
var provLength = china.provinces.length;
// for循环,创建option,将省份作为innerHTML传入option中,将option作为子元素加入到select下
for (var i=0; i < provLength; i++){
// 创建option
var provOpt = document.createElement("option");
// 取出第i 个 province[] 中的name
var provName = china.provinces[i].name;
// 将省份name添加到option中
provOpt.innerHTML = provName;
// 将这个option添加到provSelect中
provSelect.appendChild(provOpt);
}
/*第二步:由于当province发生改变的时候,对应的city也会不见,从而变为其他省份的city
* 所以:
* 1、将之前的city清楚
*
* */
provSelect.onchange = function () {
// 获取city这个select,删除下面的option,除过下标为0的“--请选择市--”这个不用删除
var citySelect = document.getElementById("city");
for (var i = 1; i < citySelect.options.length;i++){
citySelect.removeChild(citySelect.options[i]);
i--;
}
// 获取provinceSelect下被选中的option,获取其下的city
var selProv = china.provinces[provSelect.options.selectedIndex - 1];
for (var i=0; i < selProv.city.length; i++){
var cityOpt = document.createElement("option");
//取出city
var cityElement = selProv.city[i];
cityOpt.innerHTML = cityElement;
citySelect.appendChild(cityOpt);
}
}
}
</script>
</head>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
</body>
</html>