jquery实现select三级联动（简单易懂）

妖狐艹你老母 2022-05-28 03:24 228阅读 0赞

尽可能每一步都做到详细，算是一个知识的回顾，有不足之处，希望大家多提意见

该例子实现的是省市县三级联动。

实现原理：    省、市、县，每个下拉框数据都由一个数组组成；光累文字肯定是不行的，直接上代码了。

先确定HTML部分：

关键部分（js）到了！！

先分别定义三个数组

var iNum1;
    var iNum2;
    var aProvince = ['湖北','江苏','安徽'];
    var aCity =[['武汉','黄冈','荆门'],['南京','无锡','镇江'],['合肥','安庆','黄山']];
    var aCountry =[[['武汉1','武汉2'],['黄冈1','黄冈2'],['荆门1','荆门2']],[['南京1','南京2'],['无锡1','无锡2'],['镇江1','镇江2']],[['合肥1','合肥2'],['安庆1','安庆2'],['黄山1','黄山2']]];

上面定义的两个变量，下面用到的时候再给大家解释。

aProvince表示的是省的部分

aCity表示的市部分，注意这个数组比较特别，数组里面又套了三个小的数组，每个小的数组与上面的省对应

aCountry表示的是县部分，这个数组更加特别，套了三层数组。

对于上面的这几个数组你可以这么理解，省A下面肯定对应了很多的市B，而每个市B下面肯定又对应了很多县C

**第一步：遍历省级**

通过js把数组里面的内容加载到页面上去：

遍历省级的数组，将每个内容插入下拉框内

$(function () {
         for(var i=0;i<aProvince.length;i++){
             $('#selProvince').append('<option>'+aProvince[i]+'</option>');
         }
    })

下过如下图所示

![70][]

**第二步  省与市级二级联动**

我们要实现的是一个联动的效果，当选择A省的时候，市级的下拉框里面相应的显示的是对应省的市

$(function () {
         for(var i=0;i<aProvince.length;i++){
             $('#selProvince').append('<option>'+aProvince[i]+'</option>');
         };
         $('#selProvince').change(function () {
             $('#selCity').children().not(':eq(0)').remove();
             iNum1 = $(this).children('option:selected').index();
             var aaCity = aCity[iNum1-1];
             for(var j=0;j<aaCity.length;j++){
                 $('#selCity').append('<option>'+aaCity[j]+'</option>');
             }
         })
    })

利用select下拉框的change()方法，当下拉款值发生改变的时候，触发事件

iNum1 = $(this).children('option:selected').index();

这一行代码表示的是，获取你所选取的省对应的位置，可以打印出来瞧瞧，

var aaCity = aCity[iNum1-1];

当你选某个省的时候，省与市之间通过什么联系呢？后面下拉框里面的市要与现在选的省相对应，怎么对应呢，通过iNum；这一行中  aCity\[iNum-1\],表示的是，譬如你选A省，aCity\[iNum-1\]数组表示的就是A省下面对应的市；iNum-1  这里减去1的意思是，因为在下拉框里面我们第一行有个---请选择----，要把这个去掉，才能对应上。然后遍历aaCity，把对应的事插入进去；

$('#selCity').children().not(':eq(0)').remove();

这一行的意思是，当选择其他省的时候，把之前市的内容清空掉，具体效果如下

![70 1][]

**第三步 市与县的联动**

省与市联动实现后，接下来实现市与县的联动；当你选择某市的时候，对应的县会出现；

思路与上面省市联动一样；

$(function () {
         for(var i=0;i<aProvince.length;i++){
             $('#selProvince').append('<option>'+aProvince[i]+'</option>');
         };
         $('#selProvince').change(function () {
             $('#selCity').children().not(':eq(0)').remove();
             $('#selCountry').children().not(':eq(0)').remove();
             iNum1 = $(this).children('option:selected').index();
             var aaCity = aCity[iNum1-1];
             for(var j=0;j<aaCity.length;j++){
                 $('#selCity').append('<option>'+aaCity[j]+'</option>');
             }
         });
         $('#selCity').change(function () {
             $('#selCountry').children().not(':eq(0)').remove();
             iNum2 = $(this).children('option:selected').index();
             var aaCountry = aCountry[iNum1-1][iNum2-1];
             for(var k=0;k<aaCountry.length;k++){
                 $('#selCountry').append('<option>'+aaCountry[k]+'</option>');
             }
         })
    })

var aaCountry = aCountry[iNum1-1][iNum2-1];

这行代码的意思

aCountry[iNum1-1][iNum2-1];

省市县之间的联系通过iNum1   iNum2两个参数对应起来了，效果如下

![70 2][]

最后贴上所有的代码~

[70]: /images/20220528/f039c94f3a28462eb914c6acfa140f0d.png
[70 1]: /images/20220528/9065fc3a7b4d4aa3a2c87a446aeaf8eb.png
[70 2]: /images/20220528/3fe30b16eb744d788bdc17893e94401d.png