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

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

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

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

        先确定HTML部分：

<select name="" id="selProvince">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCity">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
    <option value="">----请选择----</option>
</select>

    关键部分（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>');
     }
})

下过如下图所示

第二步  省与市级二级联动

我们要实现的是一个联动的效果，当选择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();

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

第三步 市与县的联动

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

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

$(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两个参数对应起来了，效果如下

最后贴上所有的代码~

 <script>
        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']]];
  
       $(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>');
                }
            })
       })
    </script>
</head>
<body>
<select name="" id="selProvince">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCity">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
    <option value="">----请选择----</option>
</select>