【JavaScript-练习】二级联动
程序员文章站
2022-03-25 16:41:56
...
二级联动 - 纯JS实现
假设现有一个通过选择下拉框中的省份，从而在后面的下拉框中获取得到其对应
城市。且用以纯JS实现，可参考如下代码：
<!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清除
* 2、获取被选中得省份，取得其下得city添加到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>
上一篇： 【JavaScript-练习】删除、替换、克隆元素
下一篇： # CSS 3D 动画