layui下拉框二级联动

在 layui 中实现下拉框的二级联动，可以通过以下步骤：

1. 定义两个下拉框的 HTML 结构，如：

<select id="province" lay-filter="province">
  <option value="">请选择省份</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <!-- 其他省份选项 -->
</select>

<select id="city" lay-filter="city">
  <option value="">请选择城市</option>
  <!-- 根据选择的省份动态生成对应的城市选项 -->
</select>

2. 使用 layui 的 form 模块，监听下拉框的 change 事件，根据选择的省份动态生成对应的城市选项。在 JavaScript 中添加如下代码：

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

  // 监听省份下拉框的 change 事件
  form.on('select(province)', function(data){
    var provinceId = data.value;  // 获取选中的省份 ID

    // 发送异步请求获取对应的城市列表
    // 假设有一个 getCityList 方法可以获取城市列表，返回一个数组
    var cityList = getCityList(provinceId);

    // 清空原有的城市选项
    $('#city').empty();
    $('#city').append('<option value="">请选择城市</option>');

    // 动态生成城市选项
    for (var i = 0; i < cityList.length; i++) {
      $('#city').append('<option value="' + cityList[i].id + '">' + cityList[i].name + '</option>');
    }

    // 重新渲染下拉框
    form.render('select');
  });
});

3. 在 getCityList 方法中，根据省份 ID 发送异步请求，获取对应的城市列表。可以使用 Ajax 或其他方式获取数据，并返回一个包含城市对象的数组。

这样，当选择省份时，城市下拉框会根据选择的省份动态生成对应的城市选项。注意，这里的代码只是一个简单的示例，实际使用时需要根据具体的需求进行修改和完善。