layui级联选择器
时间: 2023-12-21 16:31:28 浏览: 37
Layui是一款轻量级的前端UI框架,它提供了丰富的组件和工具,方便开发者快速构建美观、易用的Web界面。Layui中的级联选择器可以实现多个选择框之间的联动选择,满足你的需求。
下面是一个使用Layui级联选择器实现省市县三级联动的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市县三级联动</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">省份</label>
<div class="layui-input-inline">
<select id="province" lay-filter="province">
<option value="">请选择省份</option>
<!-- 这里可以通过后台接口获取省份数据并动态生成选项 -->
<option value="广东省">广东省</option>
<option value="浙江省">浙江省</option>
<!-- 其他省份选项 -->
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select id="city" lay-filter="city">
<option value="">请选择城市</option>
<!-- 这里可以通过后台接口获取城市数据并动态生成选项 -->
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">区县</label>
<div class="layui-input-inline">
<select id="district">
<option value="">请选择区县</option>
<!-- 这里可以通过后台接口获取区县数据并动态生成选项 -->
</select>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
// 监听省份选择
form.on('select(province)', function(data){
var province = data.value;
// 根据选择的省份获取对应的城市数据并动态生成选项
// 这里可以通过后台接口获取城市数据
var cityOptions = '<option value="">请选择城市</option>';
if (province === '广东省') {
cityOptions += '<option value="广州市">广州市</option>';
cityOptions += '<option value="深圳市">深圳市</option>';
// 其他城市选项
} else if (province === '浙江省') {
cityOptions += '<option value="杭州市">杭州市</option>';
cityOptions += '<option value="宁波市">宁波市</option>';
// 其他城市选项
}
$('#city').html(cityOptions);
form.render('select');
});
// 监听城市选择
form.on('select(city)', function(data){
var city = data.value;
// 根据选择的城市获取对应的区县数据并动态生成选项
// 这里可以通过后台接口获取区县数据
var districtOptions = '<option value="">请选择区县</option>';
if (city === '广州市') {
districtOptions += '<option value="天河区">天河区</option>';
districtOptions += '<option value="越秀区">越秀区</option>';
// 其他区县选项
} else if (city === '深圳市') {
districtOptions += '<option value="福田区">福田区</option>';
districtOptions += '<option value="南山区">南山区</option>';
// 其他区县选项
} else if (city === '杭州市') {
districtOptions += '<option value="西湖区">西湖区</option>';
districtOptions += '<option value="拱墅区">拱墅区</option>';
// 其他区县选项
} else if (city === '宁波市') {
districtOptions += '<option value="海曙区">海曙区</option>';
districtOptions += '<option value="江东区">江东区</option>';
// 其他区县选项
}
$('#district').html(districtOptions);
form.render('select');
});
});
</script>
</body>
</html>
```
你可以根据实际需求,通过后台接口获取省份、城市和区县的数据,并动态生成选项。当选择省份时,根据选择的省份获取对应的城市数据并动态生成选项;当选择城市时,根据选择的城市获取对应的区县数据并动态生成选项。