请帮我提供LayUI 的 select 动态联动案例代码
时间: 2024-05-10 18:13:54 浏览: 63
好的,以下是一个简单的LayUI select动态联动案例代码,请参考:
HTML:
```
<div class="layui-form-item">
<label class="layui-form-label">动态联动</label>
<div class="layui-input-inline">
<select name="first" lay-filter="first">
<option value="">请选择</option>
<option value="0">第一项</option>
<option value="1">第二项</option>
<option value="2">第三项</option>
</select>
</div>
<div class="layui-input-inline">
<select name="second" lay-filter="second" disabled>
<option value="">请选择</option>
</select>
</div>
</div>
```
JavaScript:
```
layui.use(['form'], function() {
var form = layui.form;
// 监听第一级select的变化
form.on('select(first)', function(data) {
var firstVal = data.value;
if(firstVal === '0') {
// 第一项对应的二级options
var options = `
<option value="">请选择</option>
<option value="a">第一项-1</option>
<option value="b">第一项-2</option>
`;
// 将对应的options插入二级select
$('select[name="second"]').html(options);
// 启用二级select
$('select[name="second"]').prop('disabled', false);
// 渲染局部文件
form.render('select');
}
else if(firstVal === '1') {
// 第二项对应的二级options
var options = `
<option value="">请选择</option>
<option value="c">第二项-1</option>
<option value="d">第二项-2</option>
`;
// 将对应的options插入二级select
$('select[name="second"]').html(options);
// 启用二级select
$('select[name="second"]').prop('disabled', false);
// 渲染局部文件
form.render('select');
}
else if(firstVal === '2') {
// 第三项对应的二级options
var options = `
<option value="">请选择</option>
<option value="e">第三项-1</option>
<option value="f">第三项-2</option>
`;
// 将对应的options插入二级select
$('select[name="second"]').html(options);
// 启用二级select
$('select[name="second"]').prop('disabled', false);
// 渲染局部文件
form.render('select');
}
else {
// 未选择,禁用二级select
$('select[name="second"]').prop('disabled', true);
// 渲染局部文件
form.render('select');
}
});
// 监听第二级select的变化
form.on('select(second)', function(data) {
var secondVal = data.value;
// TODO: 处理第二级的联动问题
});
});
```
注意:此动态联动代码只提供了第一级和第二级的联动代码示例,如需更多级别的联动请自行扩展代码。
阅读全文