layui select静态多级联动

在 layui 中，可以通过多个 select 组件实现静态的多级联动效果。具体实现步骤如下：

1. 在 HTML 中，定义多个 select 组件，每个组件都要设置一个唯一的 id：

<div class="layui-form-item">
  <label class="layui-form-label">省份</label>
  <div class="layui-input-inline">
    <select id="province">
      <option value="">请选择省份</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广东</option>
    </select>
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">城市</label>
  <div class="layui-input-inline">
    <select id="city">
      <option value="">请选择城市</option>
    </select>
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">区县</label>
  <div class="layui-input-inline">
    <select id="district">
      <option value="">请选择区县</option>
    </select>
  </div>
</div>

2. 在 JavaScript 中，通过监听 select 的 change 事件，动态添加下级 select 的选项：

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

  // 监听省份的 change 事件
  form.on('select(province)', function(data) {
    var provinceId = data.value;
    // 根据省份的值，动态添加城市的选项
    if (provinceId == 1) {
      $('#city').html('<option value="">请选择城市</option><option value="10">北京市</option>');
    } else if (provinceId == 2) {
      $('#city').html('<option value="">请选择城市</option><option value="20">上海市</option>');
    } else if (provinceId == 3) {
      $('#city').html('<option value="">请选择城市</option><option value="30">广州市</option><option value="31">深圳市</option>');
    } else {
      $('#city').html('<option value="">请选择城市</option>');
    }
    // 清空区县的选项
    $('#district').html('<option value="">请选择区县</option>');
    // 重新渲染表单组件
    form.render();
  });

  // 监听城市的 change 事件
  form.on('select(city)', function(data) {
    var cityId = data.value;
    // 根据城市的值，动态添加区县的选项
    if (cityId == 10) {
      $('#district').html('<option value="">请选择区县</option><option value="100">东城区</option><option value="101">西城区</option>');
    } else if (cityId == 20) {
      $('#district').html('<option value="">请选择区县</option><option value="200">黄浦区</option><option value="201">徐汇区</option>');
    } else if (cityId == 30) {
      $('#district').html('<option value="">请选择区县</option><option value="300">天河区</option><option value="301">越秀区</option>');
    } else if (cityId == 31) {
      $('#district').html('<option value="">请选择区县</option><option value="310">南山区</option><option value="311">福田区</option>');
    } else {
      $('#district').html('<option value="">请选择区县</option>');
    }
    // 重新渲染表单组件
    form.render();
  });
});

这样，就可以在 layui 中实现静态的多级联动效果了。