一、背景
最近在开发的项目时,要求实现中国七大区与省市的联动选择,在网上找了一圈的插件,全都是省市区的三级联动,于是就通过layui简单的写了一个。
二、实现步骤
layui联动选择框的实现主要涉及到监听select的change事件,并根据选择的值异步加载新的内容,然后重新渲染选择框。
1.创建html结构:首先,你需要在HTML中创建联动选择框的结构。这通常包括多个<select>
元素,每个元素对应一个联动层级。
2.初始化layui表单:使用layui的表单模块来初始化你的选择框。
3.监听change事件:为每个<select>
元素添加change事件的监听器。当用户选择一个选项时,这个事件会被触发。
4.加载内容:在change事件的处理函数中,根据用户选择的值加载新的内容。
5.重新渲染选择框:一旦新的数据被加载,你需要使用这些数据来更新下一个联动层级的<select>
元素的内容,并重新渲染它。
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__STATIC__/layuiminiv2/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="__STATIC__/layuiminiv2/css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="level1" lay-filter="level1-filter" id="level1">
<option value="">请选择level1</option>
<option value="华北">华北</option>
<option value="东北">东北</option>
<option value="华东">华东</option>
<option value="华中">华中</option>
<option value="华南">华南</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
<option value="国外">国外</option>
<!-- 初始选项 -->
</select>
</div>
<div class="layui-input-inline">
<select name="level2" lay-filter="level2-filter">
<option value="">请选择level2</option>
<!-- 根据level1的选择动态加载的选项 -->
</select>
</div>
<div class="layui-input-inline">
<select name="level3" lay-filter="level3-filter">
<option value="">请选择level3</option>
<!-- 根据level2的选择动态加载的选项 -->
</select>
</div>
<!-- 更多的联动层级(如果需要) -->
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
<script src="__STATIC__/layuiminiv2/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="__STATIC__/js/city.js" charset="utf-8"></script>
<script>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
//监听提交
form.on('submit(saveBtn)', function (data) {
console.log(data.field);
});
// 监听level1的change事件
form.on('select(level1-filter)', function(data){
var value = data.value; // 获取选中的值
// console.log(value); // 打印选中的值
var keys = Object.keys(area_city[value])
var html = '';
var html2 = '';
$.each(keys, function(index, item){
html += '<option value="'+ item +'">'+ item +'</option>';
if(index == 0){
html2 += '<option value="'+ area_city[value][item][0] +'">'+ area_city[value][item][0] +'</option>';
}
});
// 更新level2、level3的选择框并重新渲染
$('select[name="level2"]').html(html);
$('select[name="level3"]').html(html2);
form.render('select');
});
// 监听level2的change事件
form.on('select(level2-filter)', function(data){
var value = data.value; // 获取选中的值
var level1 = $("#level1").val();
var keys = area_city[level1][value]
var html = '';
$.each(keys, function(index, item){
html += '<option value="'+ item +'">'+ item +'</option>';
});
// 更新level3的选择框并重新渲染
$('select[name="level3"]').html(html);
form.render('select');
});
});
</script>
</body>
</html>
四、实现效果
五、说明
1.对于更多的联动层级,你可以按照相同的模式添加更多的监听器和处理函数。
2.代码中调用的city.js资源在文章顶部,需要的自行进行下载引用。