【HTML CSS JavaScript】js实战篇-省级联动
废话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省级联动</title>
</head>
<body>
请选择省份: <select name="" id="prov">
<option value="prov">请选择</option>
</select>
请选择市:<select name="" id="city">
<option value="city">请选择</option>
</select>
请选择区县: <select name="" id="country">
<option value="city">请选择</option>
</select>
</body>
<script>
// 数据:
var provArr = [
"湖北",
"湖南",
"河北",
"河南"
];
var cityArr = [
//[cityName:"武汉",}
["武汉", "荆州", "黄冈"],
["长沙", "湘潭", "怀化"],
["秦皇岛", "石家庄", "保定"],
["南阳", "郑州", "平顶山"]
];
var countryArr = [
[
["青山", "洪山", '武昌'],
["荆州区", "江陵", '公安'],
["黄州", "武穴", '浠水'],
],
[
["长沙1", "长沙2", '长沙3'],
["湘潭1", "湘潭2", '湘潭3'],
["怀化1", "怀化2", '怀化3'],
],
[
["秦皇岛1", "秦皇岛2", '秦皇岛3'],
["石家庄1", "石家庄2", '石家庄3'],
["保定1", "保定2", '保定3'],
],
[
["南阳1", "南阳2", '南阳3'],
["郑州1", "郑州2", '郑州3'],
["平顶山1", "平顶山2", '平顶山3'],
]
];
//获取省份id
var province = document.getElementById("prov");
var city = document.getElementById("city");
var country = document.getElementById("country");
common(provArr, province);
// 为省份下拉列表添加事件,添加城市二级菜单
province.addEventListener("change", add);
function add(e) {
//初始化城市列表-清空列表
city.options.length = 0;
country.options.length = 0;
if (province.value == "prov") {
var option = document.createElement("option");
option.innerHTML = "请选择";
city.appendChild(option);
var optionCountry = option.cloneNode(true);
country.appendChild(optionCountry);
} else {
common(cityArr[province.value], city)
common(countryArr[province.value][city.value], country);
}
}
//为城市二级菜单添加事件,添加区的三级菜单
city.addEventListener("change", addCountry);
function addCountry() {
//清空区列表
country.options.length = 0;
common(countryArr[province.value][city.value], country);
if (city.options.length == 0) {
var option = document.createElement("option");
option.innerHTML = "请选择";
city.appendChild(option);
}
if (country.options.length == 0) {
var option = document.createElement("option");
option.innerHTML = "请选择";
country.appendChild(option);
}
}
//添加数据
//循环取出数据赋值给option对象
function common(arr, obj) {
arr.forEach(
function(v, k) {
//创建省份下拉菜单
var option = document.createElement("option");
option.innerHTML = v;
//给每个元素添加value使之成为对应的index
option.value = k;
//追加元素给省份菜单
obj.appendChild(option);
}
)
}
</script>
</html>
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
二维码