layui省市区三级联动

在 layui 中实现省市区三级联动可以使用其内置的 form 模块和 select 组件。以下是一个简单的示例代码：

HTML：

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

JavaScript：

layui.use(['form', 'layer'], function() {
  var form = layui.form;
  var layer = layui.layer;

  // 加载省份选项
  $.get('/api/provinces', function(data) {
    var html = '<option value="">请选择省份</option>';
    for (var i = 0; i < data.length; i++) {
      html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
    }
    $('select[name="province"]').html(html);
    form.render();
  });

  // 监听省份选择
  form.on('select(province)', function(data) {
    var provinceId = data.value;
    if (provinceId) {
      // 加载城市选项
      $.get('/api/cities', { provinceId: provinceId }, function(data) {
        var html = '<option value="">请选择城市</option>';
        for (var i = 0; i < data.length; i++) {
          html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
        }
        $('select[name="city"]').html(html);
        form.render();
      });
    } else {
      $('select[name="city"]').html('<option value="">请选择城市</option>');
      $('select[name="area"]').html('<option value="">请选择区/县</option>');
      form.render();
    }
  });

  // 监听城市选择
  form.on('select(city)', function(data) {
    var cityId = data.value;
    if (cityId) {
      // 加载区/县选项
      $.get('/api/areas', { cityId: cityId }, function(data) {
        var html = '<option value="">请选择区/县</option>';
        for (var i = 0; i < data.length; i++) {
          html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
        }
        $('select[name="area"]').html(html);
        form.render();
      });
    } else {
      $('select[name="area"]').html('<option value="">请选择区/县</option>');
      form.render();
    }
  });
});

其中，`/api/provinces`、`/api/cities` 和 `/api/areas` 是后端接口，用于获取省份、城市和区/县的列表数据。在选择省份和城市时，需要根据选中的省份和城市去获取对应的城市和区/县列表数据。最后，使用 form.render() 方法对表单进行渲染，使其生效。