【实践】四联联动 + 更加优化

上一次看了大神@进击的前端狗三联联动代码n遍之后终于明白之中的道理所以这次自己决定动手试一试搞一个四联联动，第一次搞好四联联动的时候大神跟我说了一个更优的方案，就是当每一个下拉框的名字变更的时候后面的下拉框就会自动添加上与上一下拉框相对应的值，今天给大家分享一下。

本次认识到新内容

$("#obj")[0].options.length = 0; //这个是清空对象内所有的option元素，jquery的对象是一个数组来的

先上html代码

<div id="wrapper">
   <select id="country">
      <option>请选择国家</option>
   </select>
   
   <select id="provinse">
      <option>请选择省</option>
   </select>
   
   <select id="city">
      <option>请选择市</option>
   </select>
   
   <select id="town">
       <option>请选择区/县</option>
   </select>
 </div>

jquery代码

     //题解思路，当初每变更一个区域名的时候就会初始化选择框的内容“请选择.....”，而现在我想将它变成当每变更一个区域名的时候后面的选择框就会自动出现每一个区域对应的名字，怎样做呢？？
    //首先，当国家名变更时我们先用$("#obj")[0].options.length = 0; 这个语句清空后面的提示内容实现初始化，然后再为后面的选择框添加上内容，具体如下
    
    //开始遍历Data数组(最外层)
    $.each(Data,function(_country,content1){
         $("#country").append("<option>" + _country + "</option>");
    });
    
    //当国家名变更的时候
    $("#country").change(function(){
      //先清空后面选择框的内容
      $("#provinse")[0].options.length = 0;
      $("#city")[0].options.length = 0;     
      $("#town")[0].options.length = 0;    
      
      //再遍历一次Data数组以作比较
      $.each(Data,function(_country,content1){
         if($("#country option:selected").text() == _country){
            //如果选中的国家名内容与数组里面的第一部分相等就遍历第二部分的内容
            
            $.each(content1,function(_provinse,content2){
                $("#provinse").append("<option>" + _provinse + "</option>");
                
            });
            //这里开始添加第三部分的内容，同样道理先遍历content1，选中的内容和省名作比较
            $.each(content1,function(_provinse,content2){
                if($("#provinse option:selected").text() == _provinse){
                    //如果对上了的话就遍历content2,为第三个下拉框添加内容
                    $.each(content2,function(_city,_town){
                        $("#city").append("<option>" + _city + "</option>");    
                    })
                    
                    //最后是第四部分的内容，也是先遍历content2,选中的市名与_city的内容比较
                    $.each(content2,function(_city,_town){
                        if($("#city option:selected").text() == _city){
                            $.each(_town.split(","),function(){
                                $("#town").append("<option>" + this + "</option>");
                            })
                              
                        }
                           
                    })
                }
            });
            $("#provinse").change(function(){
              //同理,当省名变更的时候清空市名，区/县名下拉框的内容
              $("#city")[0].options.length = 0;     
              $("#town")[0].options.length = 0;
              
              $.each(content1,function(_provinse,content2){
                 //遍历content1，与省名作比较 
                 if($("#provinse option:selected").text() == _provinse){
                     $.each(content2,function(_city,_town){
                        $("#city").append("<option>" + _city + "</option>"); 
                     })    
                     $.each(content2,function(_city,_town){
                         if($("#city option:selected").text() == _city){
                            $.each(_town.split(","),function(){
                                $("#town").append("<option>" + this + "</option>");
                                
                            });     
                         }
                    });
                    $("#city").change(function(){
                        //当市名发生变更的时候，初始化最后一个区/县名
                      $("#town")[0].options.length = 0;     
                      
                      $.each(content2,function(_city,_town){
                         if($("#city option:selected").text() == _city){
                            $.each(_town.split(","),function(){
                                $("#town").append("<option>" + this + "</option>");
                            }) 
                             
                        }//变更市名的if  
                      })    
                    })
                     
                 }//省名变更的if
              });
            });     
         }//国家名变更if
          
      })
    })
    
});//main函数

【实践】四联联动 + 更加优化

推荐阅读