溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery實(shí)現(xiàn)簡單三級聯(lián)動(dòng)效果

發(fā)布時(shí)間：2020-10-20 01:57:09 來源：腳本之家 閱讀：281 作者：Cool_breeze_ 欄目：開發(fā)技術(shù)

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

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

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

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

然后用Ajax動(dòng)態(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)動(dòng)</title>
 </head>
 <body>
  <!-- 三級聯(lián)動(dòng) - 兩個(gè)二級聯(lián)動(dòng) -->
  <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 () {
     // 將城市下拉列表的選項(xiàng)清空
     $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ū)級下拉列表的選項(xiàng)清空
     $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>

效果如下

jQuery實(shí)現(xiàn)簡單三級聯(lián)動(dòng)效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手