通过layui实现省市区下拉列表

layui如何引用，下文就不提了

首先，你需要将 area.json 文件引入到你的 HTML 页面中。确保 area.json 文件在相同的目录下，并且可以通过相对路径进行访问。

接下来，你可以使用以下代码来通过 Layui 实现省市区的下拉列表选择器：

HTML 代码：

<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">省份</label>
      <div class="layui-input-inline">
        <select name="province" id="province" lay-filter="province">
          <option value="">请选择省份</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-inline">
        <select name="city" id="city" lay-filter="city">
          <option value="">请选择城市</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">区县</label>
      <div class="layui-input-inline">
        <select name="area" id="area" lay-filter="area">
          <option value="">请选择区县</option>
        </select>
      </div>
    </div>
  </div>
</form>

 JavaScript 代码：

layui.use(['form'], function() {
  var form = layui.form;
    
  // 读取并解析 area.json 文件
  $.getJSON('/static/area3.json', function(data) {
      console.log('data:',data);
    var provinces = data;

    // 渲染省份选项
    for (var i = 0; i < provinces.length; i++) {
      var option = '<option value="' + provinces[i].value + '">' + provinces[i].text + '</option>';
      $('#province').append(option);
    }
    form.render('select'); // 重新渲染省份选项

    // 监听省份选择
    form.on('select(province)', function(data) {
        console.log('data:',data);
      var provinceCode = data.value;

      // 清空城市和区县选项
      $('#city').html('<option value="">请选择城市</option>');
      $('#area').html('<option value="">请选择区县</option>');

      // 根据选择的省份代码，动态生成城市选项
      var cities = null;
      for (var i = 0; i < provinces.length; i++) {
        if (provinces[i].value === provinceCode) {
          cities = provinces[i].children;
          break;
        }
      }
      if (cities) {
        for (var j = 0; j < cities.length; j++) {
          var option = '<option value="' + cities[j].value + '">' + cities[j].text + '</option>';
          $('#city').append(option);
        }
      }
      form.render('select'); // 重新渲染城市选项
    });

    // 监听城市选择
    form.on('select(city)', function(data) {
        console.log('data:',data);
      var cityCode = data.value;

      // 清空区县选项
      $('#area').html('<option value="">请选择区县</option>');

      // 根据选择的城市代码，动态生成区县选项
      var areas = null;
      for (var i = 0; i < provinces.length; i++) {
        var cities = provinces[i].children;
        for (var j = 0; j < cities.length; j++) {
          if (cities[j].value === cityCode) {
            areas = cities[j].children;
            break;
          }
        }
        if (areas) {
          for (var k = 0; k < areas.length; k++) {
            var option = '<option value="' + areas[k].value + '">' + areas[k].text + '</option>';
            $('#area').append(option);
          }
        }
      }
      form.render('select'); // 重新渲染区县选项
    });
    
    form.on('select(area)', function(data) {
        console.log('data:',data);
        
        form.render('select'); // 重新渲染区县选项
    });
    
  });
});