layui下拉框二级联动

在 layui 中实现下拉框的二级联动比较简单，你可以通过监听第一个下拉框的 change 事件，在事件回调函数中动态加载第二个下拉框的数据。

首先，需要在页面中引入 layui 的相关资源文件。然后，定义两个 select 元素，分别代表第一个和第二个下拉框。

<!-- 引入 layui 的相关资源文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.js"></script>

<!-- 定义第一个下拉框 -->
<select id="select1" lay-filter="select1">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<!-- 定义第二个下拉框 -->
<select id="select2" lay-filter="select2">
  <option value="">请选择</option>
</select>

接下来，初始化 layui 并监听第一个下拉框的 change 事件。

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

    // 监听第一个下拉框的 change 事件
    form.on('select(select1)', function(data){
      var value = data.value; // 获取选中的值
      // 根据选中值加载第二个下拉框的数据
      loadSelect2Data(value);
    });

    // 加载第二个下拉框的数据
    function loadSelect2Data(value) {
      // 根据选中值发送异步请求获取数据
      // 假设根据选中值 value 获取到的数据为 data
      var data = [
        {value: '11', text: '选项11'},
        {value: '12', text: '选项12'},
        {value: '13', text: '选项13'}
      ];

      var select2 = document.getElementById('select2');
      select2.innerHTML = ''; // 清空第二个下拉框的选项

      // 动态添加选项
      data.forEach(function(item){
        var option = document.createElement('option');
        option.value = item.value;
        option.innerText = item.text;
        select2.appendChild(option);
      });

      // 重新渲染第二个下拉框
      form.render('select');
    }
  });
</script>

这样，当第一个下拉框的选中值发生改变时，就会触发 change 事件回调函数，动态加载第二个下拉框的数据。请根据实际需求修改 loadSelect2Data 函数中的异步请求部分，以获取正确的数据。