【实践】jQuery实现三联联动

网上看过很多关于联动的jq或js代码，最近班上的前端大神教了我一种比网上还简单的jq联动方法，自己琢磨过之后确实比其他方法更简单更简洁所以在这里分享一下

 

 先上html代码

<div id="select-form">
         <select id="provinse" name="">
           <option>请选择省</option>
         </select>
         
         <select id="city" name="">
           <option>请选择市</option>
         </select>
         
         <select id="town" name="">
           <option>请选择区/县</option>
         </select>
         
         <a href="#">搜索</a>
      </div>

 

jq代码

//三联联动下拉框代码    
    var ArryData = {
         广东省:{ 
              广州市:"荔湾区,越秀区,海珠区,天河区,芳村区,白云区,黄埔区,番禺市,花都市,增城市,从化市",
            深圳市:"罗湖区,福田区,南山区,宝安区,龙岗区,盐田区",
            珠海市:"香洲区,斗门区,金湾区",
            湛江市:"赤坎区,霞山区,坡头区,麻章区,竹溪县,徐闻县,廉江市,雷州市,吴川市"
          },
         河北省:{  
              石家庄市:"深泽县,无极县,赵县",
              唐山市:"玉田县,遵化市,迁安市"
          },
          山东省:{    
              济南市:"历下区,市中区,槐荫区,天桥区,历城区,长清县,平阴县,济阳县,商河县,章丘市",
              青岛市:"市南区,市北区,四方区,黄岛区,崂山区,李沧区,城阳区"
          }
        
        
    };//ArryData结束
    
    
    var i = 0;//先定义一个变量i 用于下面函数遍历元素用
    var savedefault = new Array;//创建一个储存上面html预设好的option内容的数组用于初始化
    $("#select-form option").each(function(i) {
        //遍历所有option 将对应下标的option html内容存入对应的数组下标里
       savedefault[i] = $(this).html();
       i++;          
    });
    
    function setdefault(obj){
       var index = $(obj).index();//通过index()获得对象索引
       $(obj).html("<option>" + savedefault[index] + "</option>");
       //通过索引匹配相应数组下标的内容
        
    };
    
    //开始遍历ArryData
    $.each(ArryData,function(_provinse){
       //遍历数组获取第一部分的内容，即省名
       $("#provinse").append("<option>" + _provinse + "</option>");  //在id为provinse的下拉框下添加选择内容
    });
    
    $("#provinse").change(function(){
        //当省份下拉列表内容发生变化时执行以下方法
        setdefault("#city");//初始化市的选择框值
        setdefault("#town");//初始化区/县的值
        
        $.each(ArryData,function(_provinse,content){
            //content包含的内容就是第二部分的内容，即市名以及后面各区/县名
            if($("#provinse option:selected").text() == _provinse){//选择的省名与数组的省名相同，在id为city里增加对应内容的option
                $.each(content,function(_city,_town){
                   $("#city").append("<option>" + _city + "</option>");     
                });
                $("#city").change(function(){
                  setdefault("#town");
                  $.each(content,function(_city,_town){//这里将第二部分又分成了两部分，一部分是市名 _city,另一部分是区/县名 _town
                     if($("#city option:selected").text() == _city){//这里也是一样，当城市名内容更改后对应的区/县名也改成与之对应的内容
                         $.each(_town.split(","),function(){//将 _town 里面的内容用逗号分隔开一个一个元素
                            $("#town").append("<option>" + this + "</option>"); 
                             });
                         };
                       
                  });     
                    
                });
                
            }
            
        });
    });
    
   
});

最后还得感谢帮助我的大神@进击的前端狗