[LayUI]下拉框二级联动

在 layui 中实现下拉框的二级联动比较简单，你可以通过监听第一个下拉框的 change 事件，在事件回调函数中动态加载第二个下拉框的数据。 首先，需要在页面中引入 layui 的相关资源文件。然后，定义两个 select 元素，分别代表第一个和第二个下拉框。 ```html <!-- 引入 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 事件。 ```javascript <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 函数中的异步请求部分，以获取正确的数据。