JavaScript 三级联动

 附件连接下载地址：https://files.cnblogs.com/files/CaktyRiven/js.zip

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
  <select name="" id="province">
     <option value="">请选择省</option>
  </select>
  <select name="" id="city">
      <option value="">请选择市</option>
  </select>
 <select name="" id="county">
      <option value="">请选择区/县</option>
  </select>
  <script type="text/javascript" src="china.js"></script>
  <script type="text/javascript">
   //获取省、市、县/区、节点
   var body = document.body;
   var province =document.getElementById('province');
   var city = document.getElementById('city');
   var county = document.getElementById("county");
   //将chain.js里面的字符串通过JSON转换成对象
   var chinaArea = JSON.parse(chinaArea);
   //通过点访问法访问对象，将结果赋给定义好的省列表
   var provinceList =chinaArea.china.province;
   //for循环遍历省份列表长度
   for(var i = 0; i < provinceList.length; i++) {
            //新建option节点
            var option = document.createElement("option");
            //将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。
            option.innerHTML = provinceList[i]["-name"];
            //将option添加到province 的select下拉列表里
            province.appendChild(option);

    }
    //定义城市列表为空
    var cityList=null;
    //利用onchang方法获取下拉列表中的对象
    province.onchange=function(){
               //清空城市/区县列表
               city.innerHTML ="<option>请选择市</option>";
               county.innerHTML="<option>请选择区/县</option>";
               //通过this.selectedIndex获取select列表的下标
               if(this.selectedIndex >0){
                   //同理，通过点访问法和中括号访问法访问对象，将获取的城市赋给cityList
               cityList = chinaArea.china.province[this.selectedIndex -1].city;
               //同理、遍历城市列表的长度、新建option、赋值、并添加
               for(var i=0; i<cityList.length; i++){
               var option = document.createElement("option");
               option.innerHTML = cityList[i]["-name"];
               city.appendChild(option);
                    
               }
             }  
           }
           
         //县区的的做法同城市的原理一致，都是通过访问获得县区长度及name，再遍历县区长度，相应赋值
     
    city.onchange = function(){
                county.innerHTML="<option>请选择区/县</option>";
                if(this.selectedIndex >0){
                   for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){       
                    var option = document.createElement("option");
                    option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];
                    county.appendChild(option);
                }
                }

             }

  </script>
</body>
</html

 

2017.05.02 -- 新增 ，js+jquery，省市区三级联动，封装函数

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
  <select name="" id="province">
     <option value="">请选择</option>
  </select>
  <select name="" id="city">
      <option value="">请选择</option>
  </select>
 <select name="" id="county">
      <option value="">请选择</option>
  </select>
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/china.js"></script>
  <script type="text/javascript">
   //将chain.js里面的字符串通过JSON转换成对象
   var chinaArea = JSON.parse(chinaArea);
   console.log(chinaArea);
   //通过点访问法访问对象，将结果赋给定义好的省列表
   var provinceList =chinaArea.china.province;
   
   function address(piv,cit,coy){
          //获取省、市、县/区、节点
           var province =$(piv);
           var city = $(cit);
           var county = $(coy);
           //for循环遍历省份列表长度
           for(var i = 0; i < provinceList.length; i++) {
                    //新建option节点
                    var option = document.createElement("option");
                    //将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。
                    option.innerHTML = provinceList[i]["-name"];
                    //将option添加到province 的select下拉列表里
                    // province.appendTo(option);
                    province.append(option);

            }
            //定义城市列表为空
            var cityList =null;
            //利用onchang方法获取下拉列表中的对象
            province.change(function(){
                       //清空城市/区县列表
                       city.html ("<option>请选择市</option>");
                       county.html("<option>请选择区/县</option>");
                       //通过this.selectedIndex获取select列表的下标
                       if(this.selectedIndex >0){
                       //同理，通过点访问法和中括号访问法访问对象，将获取的城市赋给cityList
                       cityList = chinaArea.china.province[this.selectedIndex -1].city;
                       //同理、遍历城市列表的长度、新建option、赋值、并添加
                       for(var i=0; i<cityList.length; i++){
                       var option = document.createElement("option");
                       option.innerHTML = cityList[i]["-name"];
                       city.append(option);
                       }
                     }  
                   })
                 //县区的的做法同城市的原理一致，都是通过访问获得县区长度及name，再遍历县区长度，相应赋值
            city.change(function(){
                county.innerHTML="<option>请选择区/县</option>";
                  if(this.selectedIndex >0){
                     for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){       
                      var option = document.createElement("option");
                      option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];
                      county.append(option);
                  }
                }
             })
   }
   address(province,city,county);
  </script>
</body>
</html>

 

posted @ 2016-01-13 19:57  riven.lcs  阅读(1205)  评论(0)  编辑  收藏  举报