jquery实现户籍地选择下拉框

利用jquery实现户籍地选择下拉框的具体代码，供大家参考。

data.js

var data = [{
      provname: '浙江省',
      provId: 1,
      citys: [{
          cityname: "杭州市",
          cityId: 101,
          areas: [{
                  areaname: "杭州一区",
                  areaId: 1011
              },
              {
                  areaname: "杭州二区",
                  areaId: 1012
              }
          ]
      }, {
          cityname: "温州市",
          cityId: 102,
          areas: [{
              areaname: '温州一区',
              areaId: 1021
          }, {
              areaname: '温州二区',
              areaId: 1022
          }]
      }, {
          cityname: "宁波市",
          cityId: 103,
          areas: [{
              areaname: '宁波一区',
              areaId: 1031
          }, {
              areaname: '宁波二区',
              areaId: 1032
          }]

      }, {
          cityname: "绍兴市",
          cityId: 104,
          areas: [{
              areaname: '绍兴一区',
              areaId: 1041
          }, {
              areaname: '绍兴二区',
              areaId: 1042
          }]

      }]
  }, {
      provname: '山东省',
      provId: 2,
      citys: [{
          cityname: "济南市",
          cityId: 201,
          areas: [{
                  areaname: "济南一区",
                  areaId: 2011
              },
              {
                  areaname: "济南二区",
                  areaId: 2012
              }
          ]
      }, {
          cityname: "青岛市",
          cityId: 202,
          areas: [{
              areaname: '青岛一区',
              areaId: 2021
          }, {
              areaname: '青岛二区',
              areaId: 2022
          }]
      }, {
          cityname: "济宁市",
          cityId: 203,
          areas: [{
              areaname: '济宁一区',
              areaId: 2031
          }, {
              areaname: '济宁二区',
              areaId: 2032
          }]

      }, {
          cityname: "潍坊市",
          cityId: 204,
          areas: [{
              areaname: '潍坊一区',
              areaId: 2041
          }, {
              areaname: '潍坊二区',
              areaId: 2042
          }]

      }]
  },
  {
      provname: '广东省',
      provId: 3,
      citys: [{
          cityname: "广州市",
          cityId: 301,
          areas: [{
                  areaname: "广州一区",
                  areaId: 3011
              },
              {
                  areaname: "广州二区",
                  areaId: 3012
              }
          ]
      }, {
          cityname: "潮阳市",
          cityId: 302,
          areas: [{
              areaname: '潮阳一区',
              areaId: 3021
          }, {
              areaname: '潮阳二区',
              areaId: 3022
          }]
      }, {
          cityname: "澄海市",
          cityId: 303,
          areas: [{
              areaname: '澄海一区',
              areaId: 3031
          }, {
              areaname: '澄海二区',
              areaId: 3032
          }]

      }, {
          cityname: "潮州市",
          cityId: 304,
          areas: [{
              areaname: '潮州一区',
              areaId: 3041
          }, {
              areaname: '潮州二区',
              areaId: 3042
          }]

      }]
  },
  {
      provname: '甘肃省',
      provId: 4,
      citys: [{
          cityname: "兰州市",
          cityId: 401,
          areas: [{
                  areaname: "兰州一区",
                  areaId: 4011
              },
              {
                  areaname: "兰州二区",
                  areaId: 4012
              }
          ]
      }, {
          cityname: "白银市",
          cityId: 402,
          areas: [{
              areaname: '白银一区',
              areaId: 4021
          }, {
              areaname: '白银二区',
              areaId: 4022
          }]
      }, {
          cityname: "敦煌市",
          cityId: 403,
          areas: [{
              areaname: '敦煌一区',
              areaId: 4031
          }, {
              areaname: '敦煌二区',
              areaId: 4032
          }]

      }, {
          cityname: "定西市",
          cityId: 404,
          areas: [{
              areaname: '定西一区',
              areaId: 4041
          }, {
              areaname: '定西二区',
              areaId: 4042
          }]

      }]
  }
]

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/data.js"></script>
</head>
<body>
  <!-- 先添加三个下拉列表 -->
  <select name="prov" id="prov">

  </select>
  <select name="city" id="city">

  </select>
  <select name="area" id="area">
      
  </select>
  
  <script>
      var $prov=$("#prov")
      var $city=$("#city")
      var $area=$("#area")

      $(function(){
          //页面加载完成后触发
          $.each(data,function(i,e){
              $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>')   //在$obj的末尾追加子元素newObj

          })
          $prov.prepend('<option value=""  selected>请选择</option>');
          //当省名被选择时，触发以下事件
          $prov.on("change",function(){
              //遍历省
              $.each(data,function(i,e){
                  if($prov.val()==e.provId){  
                      //遍历市
                      $city.html('<option value="">请选择</option>');//用来清空之前选择的市
                      $.each(e.citys,function(i,e2){
                          $city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');
                      })
                          
                  }

              })
          })

          //当市名被选择时，触发以下事件
          $city.on("change",function(){
              //遍历省
              $.each(data,function(i,e){
                  if($prov.val()==e.provId){
                      $.each(e.citys,function(i,e2){
                          if($city.val()==e2.cityId){
                              $area.html('<option value="">请选择</option>');
                              $.each(e2.areas,function(i,e3){
                                  $area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>');
                              })
                          }
                      })
                  }
              })
                  
          })
          

      })
      

  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程宝库。

 基础版第一步：配置axios首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的U ...