jQuery 단순 3 급 연동 효과 실현

5690 단어 jQuery삼 단 연동
본 논문 의 사례 는 jQuery 가 간단 한 3 급 연동 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
일단 JSON 데 이 터 를 써 보도 록 하 겠 습 니 다.

[
 {
  "province": "   ",
  "cities": [
   {
    "city": "   ",
    "counties": ["   ", "     ", "   "]
   },
   {
    "city": "   ",
    "counties": ["   ", "     ", "   "]
   },

   {
    "city": "   ",
    "counties": ["   ", "   ", "   "]
   }
  ]
 },
 {
  "province": "   ",
  "cities": [
   {
    "city": "   ",
    "counties": ["   ", "     ", "   "]
   },
   {
    "city": "   ",
    "counties": ["   ", "     ", "   "]
   },
   {
    "city": "   ",
    "counties": ["   ", "   ", "   "]
   }
  ]
 },
 {
  "province": "   ",
  "cities": [
   {
    "city": "   ",
    "counties": ["   ", "     ", "   "]
   },
   {
    "city": "   ",
    "counties": ["   ", "     ", "   "]
   },
   {
    "city": "   ",
    "counties": ["   ", "   ", "   "]
   }
  ]
 }
]
그리고 JSON 파일 의 데 이 터 를 Ajax 동적 으로 가 져 옵 니 다.
전체 코드

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>    </title>
 </head>
 <body>
  <!--      -        -->
  <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   json     
    json = data;
    //   data  
    $.each(data, function (index, obj) {
     //          
     var provinceName = obj.province;
     //  console.log(provinceName);
     //            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) {
       //          
       var cities = obj.cities;
       //         
       $.each(cities, function (index, obj) {
        // console.log(obj.city);
        //        
        var cityName = obj.city;
        //                 select 
        $city.append(
         `<option value="${cityName}">${cityName}</option>`
        );
       });
      }
     });
    });

    $city.change(function () {
     //             
     $county.empty();
     $county.append(`<option value="">---</option>`);

     //               
     var cityElementName = $(this).children("option:selected").text();
     //  console.log(cityElementName);
     $.each(json, function (index, obj) {
      //               
      var cities = obj.cities;
      // console.log(cities);
      $.each(cities, function (index, cityObj) {
       //  console.log(cityObj.city);
       var cityName = cityObj.city;
       if (cityElementName === cityName) {
        //          
        // console.log(cityObj.counties);
        var counties = cityObj.counties;
        //         
        $.each(counties, function (index, value) {
         //        
         //  console.log(value);
         //                  select   
         $county.append(`<option value="${value}">${value}</option>`);
        });
       }
      });
     });
    });
   });
  </script>
 </body>
</html>
효 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기