1. 前言
在前端开发中，常常需要用到地区、分类等三级联动的功能，而layui是一款非常优秀的前端框架，提供了丰富的组件和插件，其中也包含了三级联动的实现方式。本文将详细介绍layui如何实现三级联动，希望对大家有所帮助。
2. 准备工作
2.1 引入layui
首先，在html文件中引入layui的css和js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 此处是页面内容 -->
<script src="layui/layui.js"></script>
</body>
</html>
2.2 编写html结构
然后，编写html结构，用layui组件实现三级联动需要用到form组件和select组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-block">
<select name="province" lay-filter="province">
<option value="">请选择省份</option>
</select>
</div>
</div>
<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="district">
<option value="">请选择区县</option>
</select>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="index.js"></script>
</body>
</html>
注意，这里的每个select组件中都有一个lay-filter属性，用于监听select的变化事件，这是实现三级联动的关键。
3. 实现三级联动
3.1 加载省份数据
在index.js文件中编写代码，首先需要加载省份数据，这里可以使用ajax来异步加载json格式的数据。
layui.use('form', function () {
var form = layui.form;
// 加载省份数据
function loadProvinceData() {
$.ajax({
type: 'GET',
url: 'data/province.json',
dataType: 'json',
success: function (data) {
// 渲染省份下拉框
var html = '<option value="">请选择省份</option>';
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i].provinceCode + '">' + data[i].provinceName + '</option>';
}
$('select[name="province"]').html(html);
form.render(); // 更新渲染
},
error: function () {
console.log('加载省份数据失败');
}
});
}
loadProvinceData();
});
这里我们需要在data文件夹下创建province.json文件，并准备好省份数据，例如：
[
{
"provinceCode": "110000",
"provinceName": "北京市"
},
{
"provinceCode": "120000",
"provinceName": "天津市"
},
...
]
3.2 加载城市数据
当用户选择省份时，下面的城市下拉框就需要刷新，从而加载该省份对应的城市数据。
layui.use('form', function () {
var form = layui.form;
// 加载省份数据
function loadProvinceData() {
// 代码略...
}
loadProvinceData();
// 加载城市数据
function loadCityData(provinceCode) {
$.ajax({
type: 'GET',
url: 'data/city.json',
dataType: 'json',
data: {
provinceCode: provinceCode
},
success: function (data) {
// 渲染城市下拉框
var html = '<option value="">请选择城市</option>';
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i].cityCode + '">' + data[i].cityName + '</option>';
}
$('select[name="city"]').html(html);
form.render(); // 更新渲染
},
error: function () {
console.log('加载城市数据失败');
}
});
}
// 监听省份下拉框
form.on('select(province)', function (data) {
var provinceCode = data.value;
if (provinceCode) { // 如果选择了省份
loadCityData(provinceCode); // 加载城市数据
} else { // 如果没有选择省份
$('select[name="city"]').html('<option value="">请选择城市</option>'); // 清空城市下拉框
$('select[name="district"]').html('<option value="">请选择区县</option>'); // 清空区县下拉框
form.render(); // 更新渲染
}
});
});
这里我们需要在data文件夹下创建city.json文件，并准备好城市数据，在请求城市数据时带上省份代码，例如：
[
{
"cityCode": "110100",
"cityName": "市辖区",
"provinceCode": "110000"
},
{
"cityCode": "110200",
"cityName": "县",
"provinceCode": "110000"
},
...
]
3.3 加载区县数据
当用户选择城市时，下方的区县下拉框就需要刷新，从而加载该城市对应的区县数据。
layui.use('form', function () {
var form = layui.form;
// 加载省份数据
function loadProvinceData() {
// 代码略...
}
loadProvinceData();
// 加载城市数据
function loadCityData(provinceCode) {
// 代码略...
}
// 加载区县数据
function loadDistrictData(cityCode) {
$.ajax({
type: 'GET',
url: 'data/district.json',
dataType: 'json',
data: {
cityCode: cityCode
},
success: function (data) {
// 渲染区县下拉框
var html = '<option value="">请选择区县</option>';
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i].districtCode + '">' + data[i].districtName + '</option>';
}
$('select[name="district"]').html(html);
form.render(); // 更新渲染
},
error: function () {
console.log('加载区县数据失败');
}
});
}
// 监听城市下拉框
form.on('select(city)', function (data) {
var cityCode = data.value;
if (cityCode) { // 如果选择了城市
loadDistrictData(cityCode); // 加载区县数据
} else { // 如果没有选择城市
$('select[name="district"]').html('<option value="">请选择区县</option>'); // 清空区县下拉框
form.render(); // 更新渲染
}
});
});
这里我们需要在data文件夹下创建district.json文件，并准备好区县数据，在请求区县数据时带上城市代码，例如：
[
{
"districtCode": "110101",
"districtName": "东城区",
"cityCode": "110100"
},
{
"districtCode": "110102",
"districtName": "西城区",
"cityCode": "110100"
},
...
]
4. 总结
至此，通过使用layui的form组件和select组件，我们成功实现了省份、城市、区县三级联动的功能。这里我们将省份、城市、区县的数据放在了json文件中，当然也可以放在数据库中，前端通过ajax请求数据即可。