layui 多级下拉框

在 layui 中，可以使用 form 模块的 select 组件来实现多级下拉框的功能。

首先，需要在 HTML 中定义多个 select 标签，每个 select 标签对应一个级别的下拉框。例如：

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">一级下拉框</label>
    <div class="layui-input-block">
      <select name="level1" lay-filter="level1">
        <option value="">请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">二级下拉框</label>
    <div class="layui-input-block">
      <select name="level2" lay-filter="level2">
        <option value="">请选择</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">三级下拉框</label>
    <div class="layui-input-block">
      <select name="level3" lay-filter="level3">
        <option value="">请选择</option>
      </select>
    </div>
  </div>
</form>

然后，可以使用 JavaScript 代码来实现多级下拉框的联动。例如：

// 当一级下拉框的值发生改变时
form.on('select(level1)', function(data){
  // 获取选中的值
  var value = data.value;
  // 根据选中的值，动态生成二级下拉框的选项
  var options = '<option value="">请选择</option>';
  if (value === '1') {
    options += '<option value="11">选项11</option><option value="12">选项12</option>';
  } else if (value === '2') {
    options += '<option value="21">选项21</option><option value="22">选项22</option>';
  } else if (value === '3') {
    options += '<option value="31">选项31</option><option value="32">选项32</option>';
  }
  $('select[name="level2"]').html(options);
  // 清空三级下拉框的选项
  $('select[name="level3"]').html('<option value="">请选择</option>');
});

// 当二级下拉框的值发生改变时
form.on('select(level2)', function(data){
  // 获取选中的值
  var value = data.value;
  // 根据选中的值，动态生成三级下拉框的选项
  var options = '<option value="">请选择</option>';
  if (value === '11') {
    options += '<option value="111">选项111</option><option value="112">选项112</option>';
  } else if (value === '12') {
    options += '<option value="121">选项121</option><option value="122">选项122</option>';
  } else if (value === '21') {
    options += '<option value="211">选项211</option><option value="212">选项212</option>';
  } else if (value === '22') {
    options += '<option value="221">选项221</option><option value="222">选项222</option>';
  } else if (value === '31') {
    options += '<option value="311">选项311</option><option value="312">选项312</option>';
  } else if (value === '32') {
    options += '<option value="321">选项321</option><option value="322">选项322</option>';
  }
  $('select[name="level3"]').html(options);
});

这样，就可以实现多级下拉框的联动了。当一级下拉框的值发生改变时，会动态生成二级下拉框的选项；当二级下拉框的值发生改变时，会动态生成三级下拉框的选项。