js中的省市区三级联动

Posted 2020-09-11

　　

　　想要实现省市区的三级联动，首先需要的是一个下拉框，这个下拉框用我们的<select>标签就能实现，具体如下：

<select id="province" onchange="chooseProvince(this)">

<option value="1">请选择省</option>

</select>
<select id="city" onchange="choosecity(this)">
<option value="1">请选择市</option>
</select>
<select id="area">
<option value="1">请选择区</option>
</select>

　　此处的onchange是一个触发事件，用来连接js脚本语言实现的内容。最基础的下拉框出来之后，需要准备的便是一个全国省市区的数据。这种数据网络上一般都有具体存在形式类似如下

var data=[{name:‘北京‘,cityList:[‘‘,‘‘,‘‘...‘‘]},{name:‘湖北‘,cityList:[{name:‘武汉‘,areaList:[‘‘,‘‘,‘‘,...‘‘]},{},{},{}...{}]},{},{}...{}];

　　下拉框中的数据，使用输入法输入是个不理智的想法，所以此处体现了循环遍历的重要性，循环的长度是所有数据集合的长度，将遍历出来的所有省，直辖市，行政区放入到一个集合中。单独获取data中第一组name的方法是 data.name即可。在遍历的过程中增加新的省份便实现了第一个下拉框的数据。

　　这里得到的省集合是为了与市联动而准备的，也就是第二个下拉框的内容。第二个下拉框的内容受到第一个的选择的影响，首先要判断出第一个选择的是哪个省，这里用

var index = th.selectedIndex-1;
var provinceName = provinceArray[index];

获取市的name首先要确定其所在的cityList，而获取cityList则需要其对应的省（第一个下拉框的选择，即上面的provinceName），正因为如此，遍历省的集合，当provinceName相等于其中一个时，以此作为判断条件，获取此时的cityList，cityName集合中的name便是所需要的市，具体方法类似于获取省的方法，继而获得了city的name。在这里需要注意的是，当选择省的时候，之前的市的内容必须清空，否则增加所需要的对应的市的时候会在原有的基础上进行。这里清空的方法有很多，我喜欢使用的是在遍历添加市之前，增加一个对象.innerhtml="";

第三个下拉框内容的增加方法等同于第二个，需要它的前一级信息的集合，即市的集合。判断出选择的市，方法同上，然后以，遍历过程中市的内容相等于选择的市内容相等作为条件，得到areaList，区的集合，这里增加区的时候同样需要把之前的增加内容清空。

区的单纯增加的详细代码如下，前提是准确获取对应的区的集合：

for(var a=0;a<areaList.length;a++){
var area = areaList[a];
areaTag.add(new Option(area,a));

　　总结：总的来说，每一个下拉框内容的添加都是建立在获取对应集合的基础之上。获取集合的条件即如上所述，其中需要注意局部变量与全局变量的使用范围。

js主要内容如下

function chooseProvince(th){
var index = th.selectedIndex-1;
var provinceName = provinceArray[index];
for(var n=0; n<provinceList.length; n++){
var provice = provinceList[n];
console.log(provice.name == provinceName);
if (provice.name == provinceName){
cityList = provice.cityList;
cityTag.innerHTML="";
console.log(cityList);
for(var c=0; c<cityList.length; c++){
var city = cityList[c];
var cityName = city.name;
cityArray[c]=cityName;
cityTag.add(new Option(cityName,c));
　　　}
　　}
　}
}
function choosecity(tr){
var index = tr.selectedIndex;
var cityName = cityArray[index];
for(var m=0;m<cityList.length;m++){
var city1=cityList[m];
if(cityName == city1.name){
var areaList= city1.areaList
areaTag.innerHTML="";
for(var a=0;a<areaList.length;a++){
var area = areaList[a];
areaTag.add(new Option(area,a));
　　　　　　}
　　　　}
　　}
}

以上纯属个人观点，如有问题请多多指出，谢谢。