jquery实现select三级联动(简单易懂)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yanchenxi313761/article/details/79731900

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

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

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

        先确定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>

展开阅读全文

没有更多推荐了,返回首页