数组与js实现select下拉菜单的省市区三级联动
作者：互联网
先附上源码，后面再分析。
<!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 id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
<script>
//省份数组
var provinceArr = ['上海','江苏','河北'];
//城市数组
var cityArr = [
['上海市'],
['苏州市','南京市','扬州市'],
['石家庄','秦皇岛','张家口']
];
//区域数组
var countryArr = [
[
['黄浦区','静安区','长宁区','浦东区']
],[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区']
],[
['长安区','桥西区','新华区','井陉矿区'],
['海港区','山海关区','北戴河区','抚宁区'],
['桥东区','桥西区','宣化区','下花园区']
]
]
//自动创建省份下拉菜单
function createOption(obj,data){ //obj表示下拉菜单的元素对象，data表示数组保存的下拉菜单选项
for(var i in data){ //也可以写成for(let i =0;i<data.length;i++)
var op = new Option(data[i],i); //创建下拉菜单中的option
//Option的第一个参数用于设置显示的文本，第二个参数用于设置value值
obj.options.add(op); //将选项添加到下拉菜单中
}
}
var province = document.getElementById('province'); //获取省份元素对象
createOption(province,provinceArr);
//选择省份后，自动生成对应城市的下拉菜单
var city = document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){ //为省份下拉菜单添加事件
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
if(province.value >=0){
city.onchange();
}else{
country.options.length = 0;
}
}
//选择城市后，自动生成对应区域的下拉菜单
var country = document.getElementById('country'); //获取区域下拉菜单的元素对象
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
</script>
</body>
</html>实现效果如下：
下面开始分析
1.首先是我们自己定义createOption()函数，该函数的作用是创建并设置下拉菜单的option选项。
<script>
function createOption(obj,data){ //obj表示下拉菜单的元素对象，data表示数组保存的下拉菜单选项数据
for(var i in data){ //也可以写成for(let i =0;i<data.length;i++)
var op = new Option(data[i],i); //创建下拉菜单中的option
//Option的第一个参数用于设置显示的文本，第二个参数用于设置value值
obj.options.add(op); //将选项添加到下拉菜单中
}
}
</script>例如我们向第一个id为"province"的select元素中分别编写省份数组中上海,江苏,河北三个option选项。
在通过getElementById的方法获取到下拉菜单的元素对象后，我们在调用createOption函数时分别传入该元素对象和他对应的省份数组provinceArr。
var province = document.getElementById('province'); //获取省份元素对象
createOption(province,provinceArr);
函数调用后的select变为：
<select id="province">
<option value="-1">请选择</option> //该选项是自己编写的
<option value="0">上海</option> //下面三项是调用函数后自动编写的
<option value="1">江苏</option>
<option value="2">河北</option>
</select>2.接下来我们来看onchange事件，该事件是实现下拉菜单联动的关键，该事件的作用是当元素改变时运行脚本，即当我们选择完下拉框的选项后便执行onchange中的function方法。
下面的代码中，我们可以看到，在我们选择完省份选项后，我们便再次调用了createOption函数来自动编写选项，不过这一次我们传入的参数是城市select元素对象和其对应的城市数组。
例如，我们在省份下拉框选择江苏后，province.value就会变为1，而我们传入的数组就为cityArr[1]，其对应的数据为['苏州市','南京市','扬州市']，这样我们便成功向城市下拉框中编写了江苏对应的三个城市的选项，完成了省份和城市下拉框的联动。
我们可以注意到该function中还有清空原有option和if..else..判断的操作，这两者的作用我将在后面的注意事项讲解。
<script>
var city = document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){ //为省份下拉菜单添加事件
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
if(province.value >=0){
city.onchange();
}else{
country.options.length = 0;
}
}
</script>3.在明白了省份和城市的下拉框联动原理后，城市和区域的联动其实也是相同的原理。
例如，我们在省份下拉框中选择完江苏后，province.value为1，而在城市下拉框中我们选择扬州市的话，city.value就为2，则我们传入的数组为countryArr[1][2]，在区域数组中对应的数据为['邗江区','广陵区','江都区']，这样我们便在区域select元素对象中编写了三个对应的区域option选项。
<script>
//选择城市后，自动生成对应区域的下拉菜单
var country = document.getElementById('country'); //获取区域下拉菜单的元素对象
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
</script>注意事项
1.清空option操作的必要性
我们可以发现，在每次的onchange事件中，在调用createOption函数前都执行了将原有下拉菜单option选项清空的操作，这主要是为了让我们在再次选择省份或城市下拉框时，先清空之前城市下拉框或区域下拉框中遗留的option选项。
为了显示清空操作的必要性，我先将省份onchange中的清空操作注释掉。
<script>
var city = document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){ //为省份下拉菜单添加事件
//city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
if(province.value >=0){
city.onchange();
}else{
country.options.length = 0;
}
}
</script>在注释掉清空操作后，我们在省份先选择江苏然后在选择河北，城市下拉框就会出现两个省份的城市数据叠加积累的现象，所以我们可以看出清空操作的作用就是在我们选择河北时，清空掉之前选择江苏省留下的苏州市、南京市和扬州市这三个数据。
2.onchange中if..else..判断的作用。
如果我们将if..else..注释掉，我们就会发现当我们在第一次选择完省市区后再次选择省份的话，区域的下拉菜单却还是前一个省份城市的。
例如，我们在第一次选择江苏扬州市广陵区后，选择修改省份为河北，就会出现区域下拉框仍为广陵区的现象。
第一次选择江苏扬州市广陵区：
接着修改省份为河北：
为了解决这种情况，就需要在省份的onchange事件中添加一个if..else..判断，
<script>
var city = document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){ //为省份下拉菜单添加事件
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
if(province.value >=0){
city.onchange();
}else{
country.options.length = 0;
}
}
</script>在该判断中，当province.value小于0，即我们在省份框内选择了“请选择”这个选项时，他将会清空区域下拉框中的所有选项，变为下图这个样子。
而当我们如上面的例子中先选择了江苏然后再选择河北的话，在选择完河北后将触发省份的onchange事件，此时我们的province.valuey已经变为2，大于0将执行城市的onchange事件，即为区域下拉框添加河北对应的区域option选项。
标签：province,city,js,下拉框,onchange,省份,下拉菜单,select 来源： https://blog.csdn.net/Kivze/article/details/120680952