layui三级联动下拉框
时间: 2023-05-17 18:01:54 浏览: 145
layui是一款简洁易用的前端UI框架,在layui中提供了三级联动下拉框的组件。三级联动下拉框即将三个下拉框进行联动,第一个下拉框选择一个项后,第二个下拉框根据第一个下拉框的选项动态展示相应的选项,第三个下拉框同理。
使用layui的三级联动下拉框非常简单,在HTML中,我们需要定义三个select元素,以及它们各自的id和class属性,如下所示:
```html
<select name="province" id="province" lay-filter="province">
<option value="">请选择省份</option>
<!-- 省份选项 -->
</select>
<select name="city" id="city" lay-filter="city" disabled>
<option value="">请选择城市</option>
<!-- 城市选项 -->
</select>
<select name="area" id="area" lay-filter="area" disabled>
<option value="">请选择县/区</option>
<!-- 县/区选项 -->
</select>
```
在JavaScript中,我们需要引用layui和对应的模块,如form模块和jquery库。接着,我们可以通过layui的form.on(事件, 回调函数)方法监听每个下拉框的change事件,并在回调函数中编写对应的联动代码,如下所示:
```javascript
layui.use(['jquery', 'form'], function(){
var $ = layui.jquery,
form = layui.form;
//监听省份下拉框的change事件
form.on('select(province)', function(data){
//动态获取城市数据
//省份value值
var value = data.value;
//发送ajax请求,获取对应的城市数据
$.get('url', {provinceId: value}, function(res){
//将城市选项插入到城市下拉框中
var options = '<option value="">请选择城市</option>';
for(var i=0; i<res.length; i++){
options += '<option value="'+res[i].id+'">'+res[i].name+'</option>';
}
$('#city').html(options);
//更新渲染
form.render();
//启用城市下拉框
$('#city').prop('disabled', false);
});
//清空县/区下拉框
$('#area').html('<option value="">请选择县/区</option>');
//禁用县/区下拉框
$('#area').prop('disabled', true);
});
//监听城市下拉框的change事件
form.on('select(city)', function(data){
//动态获取县/区数据
//城市value值
var value = data.value;
//发送ajax请求,获取对应的县/区数据
$.get('url', {cityId: value}, function(res){
//将县/区选项插入到县/区下拉框中
var options = '<option value="">请选择县/区</option>';
for(var i=0; i<res.length; i++){
options += '<option value="'+res[i].id+'">'+res[i].name+'</option>';
}
$('#area').html(options);
//更新渲染
form.render();
//启用县/区下拉框
$('#area').prop('disabled', false);
});
});
});
```
这样,就实现了一个简单的三级联动下拉框。需要注意的是,动态获取数据的方式可能因项目而异,此处仅提供一个简单的示例。