jQuery實現(xiàn)簡單三級聯(lián)動效果

更新時間：2020年09月05日 13:41:09 作者：Cool_breeze_

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡單三級聯(lián)動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)簡單三級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

首先寫一個JSON數(shù)據(jù)

[
 {
  "province": "吉林省",
  "cities": [
   {
    "city": "長春市",
    "counties": ["朝陽區(qū)", "經(jīng)濟開發(fā)區(qū)", "高新區(qū)"]
   },
   {
    "city": "吉林市",
    "counties": ["東城區(qū)", "經(jīng)濟開發(fā)區(qū)", "老城區(qū)"]
   },

   {
    "city": "白山市",
    "counties": ["二道區(qū)", "河?xùn)|區(qū)", "高新區(qū)"]
   }
  ]
 },
 {
  "province": "遼寧省",
  "cities": [
   {
    "city": "沈陽市",
    "counties": ["朝陽區(qū)", "經(jīng)濟開發(fā)區(qū)", "高新區(qū)"]
   },
   {
    "city": "大連市",
    "counties": ["東城區(qū)", "經(jīng)濟開發(fā)區(qū)", "老城區(qū)"]
   },
   {
    "city": "鐵嶺市",
    "counties": ["二道區(qū)", "河?xùn)|區(qū)", "高新區(qū)"]
   }
  ]
 },
 {
  "province": "山東省",
  "cities": [
   {
    "city": "青島市",
    "counties": ["朝陽區(qū)", "經(jīng)濟開發(fā)區(qū)", "高新區(qū)"]
   },
   {
    "city": "濟南市",
    "counties": ["東城區(qū)", "經(jīng)濟開發(fā)區(qū)", "老城區(qū)"]
   },
   {
    "city": "威海市",
    "counties": ["二道區(qū)", "河?xùn)|區(qū)", "高新區(qū)"]
   }
  ]
 }
]

然后用Ajax動態(tài)獲取JSON文件中的數(shù)據(jù)

完整代碼

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>三級聯(lián)動</title>
 </head>
 <body>
  <!-- 三級聯(lián)動 - 兩個二級聯(lián)動 -->
  <select id="province">
   <option value="">---</option>
  </select>
  <select id="city">
   <option value="">---</option>
  </select>
  <select id="county">
   <option value="">---</option>
  </select>

  <script src="js/jquery-1.12.4.js"></script>
  <script src="../js/createXMLHttpRequest.js"></script>
  <script>
   var $province = $("#province");
   var $city = $("#city");
   var $county = $("#county");
   var json;
   $.getJSON("data/server1.json", function (data) {
    // 把data保存到j(luò)son全局變量中
    json = data;
    // 遍歷data數(shù)據(jù)
    $.each(data, function (index, obj) {
     // 獲取所有的省份信息
     var provinceName = obj.province;
     //  console.log(provinceName);
     // 將省份信息添加到對應(yīng)的select元素中
     $province.append(
      `<option value="${provinceName}">${provinceName}</option>`
     );
    });

    $province.change(function () {
     // 將城市下拉列表的選項清空
     $city.empty();
     $city.append(`<option value="">---</option>`);

     // 獲取到所選擇的城市的文本信息
     var provinceElementName = $(this).children("option:selected").text();
     //  console.log(provinceElementName);
     $.each(json, function (index, obj) {
      var provinceName = obj.province;
      // console.log(provinceName);
      if (provinceElementName === provinceName) {
       // 獲取到城市數(shù)組集合
       var cities = obj.cities;
       // 遍歷城市數(shù)組集合
       $.each(cities, function (index, obj) {
        // console.log(obj.city);
        // 獲取到城市名稱
        var cityName = obj.city;
        // 將該省對應(yīng)的城市名稱添加到對應(yīng)的select中
        $city.append(
         `<option value="${cityName}">${cityName}</option>`
        );
       });
      }
     });
    });

    $city.change(function () {
     // 將區(qū)級下拉列表的選項清空
     $county.empty();
     $county.append(`<option value="">---</option>`);

     // 獲取到所選擇的城市的文本信息
     var cityElementName = $(this).children("option:selected").text();
     //  console.log(cityElementName);
     $.each(json, function (index, obj) {
      // 獲取該省對應(yīng)的所有的城市信息
      var cities = obj.cities;
      // console.log(cities);
      $.each(cities, function (index, cityObj) {
       //  console.log(cityObj.city);
       var cityName = cityObj.city;
       if (cityElementName === cityName) {
        // 獲取到區(qū)級數(shù)組集合
        // console.log(cityObj.counties);
        var counties = cityObj.counties;
        // 遍歷區(qū)級數(shù)組集合
        $.each(counties, function (index, value) {
         // 獲取到區(qū)級名稱
         //  console.log(value);
         // 將該城市對應(yīng)的區(qū)級名稱添加到對應(yīng)的select元素中
         $county.append(`<option value="${value}">${value}</option>`);
        });
       }
      });
     });
    });
   });
  </script>
 </body>
</html>

效果如下