Web front - 使用weui实现省市区三级联动 - 《后端学习笔记》

">
全国省市区数据
具体实现

全国省市区数据

详情见[https://github.com/uiwjs/province-city-china](https://github.com/uiwjs/province-city-china)
此处使用的数据是[https://github.com/uiwjs/province-city-china/blob/master/dist/level.json](https://github.com/uiwjs/province-city-china/blob/master/dist/level.json)

具体实现

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
<body>
  <div class="item" id="pickAddress">
      <div class="item-title">所在地</div>
      <div class="item-right">
          <div class="right-title">请选择</div>
          <div class="item-arr"><img src="../imgs/i_u_more.png" alt="" class="img"></div>
      </div>
  </div>
</body>
<script src="../js/address.js"></script><!-- 这里是地址数据 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script>
  $('#pickAddress').click(function() {
      weui.picker(address, {
          defaultValue: ["110000", "110000", "110101"],
          onChange: function (result) {
              console.log(result)
          },
          onConfirm: function (result) {
              console.log(result)
          },
          id: 'addressSelect'
      })
  })
</script>