省级联动，JSON的使用_json省级联动-CSDN博客

本文链接：https://blog.csdn.net/weixin_45701008/article/details/104206617

省级联动

问题总结：（这个主要卡住在josn的运用上，对于josn还是不理解是做什么的，为什么要josn.stringin()和josn.parse()。搜了一上午关于josn就是解释这两方法，但是没有什么语义环境体现它的具体用处，所以先抛开这个概念，只记住它的基本使用方法吧。）

josn 用法：
1.josn的格式为：数组名=[ { “属性”：“值”，“属性”：“值” } { 对象元素 } ]；
2.josn的用法：首先将代码写在js文件中，在html文件内需要导入该文件。
3.调用格式为：$ . ( josn的数组名，function（k,d）{ })； j

son文件例： json文件格式

效果

显示界面

<body>
  <div class="Chunk01" id="disp">
   <select>
    <option>--请选择--</option>
   </select>省
   <select>
    <option>--请选择--</option>
   </select>市
   <select>
    <option>--请选择--</option>
   </select>乡
  </div>
 </body>

JS实现

<script type="text/javascript" src="jquery-3.4.1.js" ></script>    //导入JQ包
  <script type="text/javascript" src="JSjosn01.js" ></script>     //导入相关的josn格式。
  <script>
  $(function(){
   var val01;
   var val02;
    $(".Chunk01 select:eq(0)").on("mouseenter",function(){    //为第一个省添加moseenter事件，鼠标触碰到元素则触发事件，也可用mousedown；
     $(".Chunk01 select:eq(0)").html("<option>--请选择--</option>"); //找到第一个多选器；并追加城市元素
     $.each(Rigoin, function(k,d) {         //Json格式的调用$.each(josn数组的名称，function(k指id，d指对象元素){});
      $(".Chunk01 select:eq(0)").append("<option>"+d.name+"</option>");//  (d.属性)代表元素对象的值，元素对象以键值对{属性：值，...}方式储存
     });
    })
    $(".Chunk01 select:eq(0)").on("change",function(){     //继续为第一个省添加change事件，以获取省级的最终值。
     val01=$(this).val();           
     $.each(Rigoin,function(k,d){         //为第二个市级添加城市元素
      if(val01==d.name){
       $(".Chunk01 select:eq(1)").html("<option>--请选择--</option>");
       $.each(d.city, function(k,d) {
        $(".Chunk01 select:eq(1)").append("<option>"+d.name+"</option>");
       });
      }
     })
    })
    $(".Chunk01 select:eq(1)").on("change",function(){
     val02=$(this).val();
     $.each(Rigoin,function(k,d){
      if(val01==d.name){
       $.each(d.city,function(k,d){
        if(val02==d.name){
         $(".Chunk01 select:eq(2)").html("<option>--请选择--</option>");
         $.each(d.city, function(k,d) {
          $(".Chunk01 select:eq(2)").append("<option>"+d+"</option>");
         });
        }
       })
      }
     })
    })
  }) 
  </script>