举一个 layui 动态绑定下拉框的例子
时间: 2023-11-02 18:23:06 浏览: 52
好的,下面是一个简单的 layui 动态绑定下拉框的例子:
HTML 代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-block">
<select name="city" lay-filter="city">
<option value="">请选择城市</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">区域</label>
<div class="layui-input-block">
<select name="area" lay-filter="area">
<option value="">请选择区域</option>
</select>
</div>
</div>
```
JavaScript 代码:
```javascript
// 城市数据
var cityData = [
{
"id": 1,
"name": "北京市",
"areas": [
{
"id": 101,
"name": "东城区"
},
{
"id": 102,
"name": "西城区"
},
{
"id": 103,
"name": "朝阳区"
}
]
},
{
"id": 2,
"name": "上海市",
"areas": [
{
"id": 201,
"name": "黄浦区"
},
{
"id": 202,
"name": "徐汇区"
},
{
"id": 203,
"name": "长宁区"
}
]
}
];
// 动态绑定城市下拉框
var citySelect = $('select[name="city"]');
var areaSelect = $('select[name="area"]');
$.each(cityData, function(index, city) {
citySelect.append('<option value="' + city.id + '">' + city.name + '</option>');
});
// 动态绑定区域下拉框
form.on('select(city)', function(data) {
var cityId = data.value;
var city = $.grep(cityData, function(city) {
return city.id == cityId;
})[0];
areaSelect.empty().append('<option value="">请选择区域</option>');
$.each(city.areas, function(index, area) {
areaSelect.append('<option value="' + area.id + '">' + area.name + '</option>');
});
form.render('select');
});
```
这个例子中,我们首先定义了一个城市数据,包含城市名称和区域信息。然后,我们在 HTML 中定义了两个下拉框,一个是城市下拉框,一个是区域下拉框。在 JavaScript 中,我们使用 jQuery 动态绑定了城市下拉框,并使用 layui 的 form 模块监听了城市下拉框的变化事件。当城市下拉框的值发生变化时,我们根据选择的城市动态绑定了区域下拉框的数据。最后,我们调用了 form.render('select') 方法,使下拉框的渲染生效。