三级联动
省市区三级联动具体思路
前端使用三级联动主要有以下步骤
1、下拉框在改变每个值得时候会触发 onchange(this)
2、使用new Option()构造方法,给下拉框增加值
详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
省:
<select id="province" name="province" onchange="changeProvince(this)">
<option value="-1">请选择省份</option>
</select>
市:
<select id="city" name="city" onchange="changeCity(this)">
<option value="-1">请选择城市</option>
</select>
区:
<select id="area" name="area">
<option value="-1">请选择区域</option>
</select>
<script type="text/javascript">
let provinceData = ['江苏省','安徽省'];
let cityData = [
['江苏城市一','江苏城市二','江苏城市三'],
['安徽城市一','安徽城市二','安徽城市三']
];
let areaData = [
[
['江苏城市一1','江苏城市一2','江苏城市一3'],
['江苏城市二1','江苏城市二2','江苏城市二3'],
['江苏城市三1','江苏城市三2','江苏城市三3'],
],
[
['安徽城市一1','安徽城市一2','安徽城市一3'],
['安徽城市二1','安徽城市二2','安徽城市二3'],
['安徽城市三1','安徽城市三2','安徽城市三3'],
]
];
let province = document.getElementById("province");
let city = document.getElementById("city");
let area = document.getElementById("area");
let currentIndex = -1;
for (let i = 0; i < provinceData.length; i++) {
let provinceOption = new Option(provinceData[i],i)
province.options.add(provinceOption)
}
/**
* 改变省份时所需要的操作
* @param obj obj
*/
function changeProvince(obj){
if (obj.value === -1){
city.options.length = 0;
area.options.length = 0;
}
currentIndex = obj.value;
let cityTemp = cityData[currentIndex];
let areaTemp = areaData[currentIndex][0]
city.options.length = 0;
area.options.length = 0;
for (let i = 0; i < cityTemp.length; i++) {
let option = new Option(cityTemp[i],i)
city.options.add(option);
}
for (let i = 0; i < areaTemp.length; i++) {
let option = new Option(areaTemp[i],i)
area.options.add(option);
}
}
/**
* 改变城市时 操作
* @param obj obj
*/
function changeCity(obj){
let selectIndex = obj.selectedIndex;
let areaTemp = areaData[currentIndex][selectIndex];
area.options.length = 0;
for (let i = 0; i < areaTemp.length; i++) {
let areaOption = new Option(areaTemp[i],i)
area.options.add(areaOption)
}
}
</script>
</body>
</html>