layui省市区级联选择器
时间: 2023-10-13 18:05:16 浏览: 176
Layui 使用 citypicker 省市区级联选择地址
5星 · 资源好评率100%
您可以使用layui的"省市区级联选择器"实现省市区三级联动选择功能。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui省市区级联选择器示例</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-block">
<select id="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 id="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 id="area">
<option value="">请选择区县</option>
<!-- 这里填充区县数据 -->
</select>
</div>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use(['form', 'jquery'], function(){
var form = layui.form;
var $ = layui.$;
// 获取省份数据
$.getJSON('省份数据接口', function(data){
var provinceSelect = $('#province');
$.each(data, function(index, item){
provinceSelect.append(new Option(item.name, item.code));
});
form.render('select');
});
// 省份选择监听事件
form.on('select(province)', function(data){
var provinceCode = data.value;
var citySelect = $('#city');
var areaSelect = $('#area');
// 根据省份的选择获取城市数据
$.getJSON('城市数据接口?provinceCode=' + provinceCode, function(data){
citySelect.empty();
areaSelect.empty();
citySelect.append(new Option('请选择城市', ''));
areaSelect.append(new Option('请选择区县', ''));
$.each(data, function(index, item){
citySelect.append(new Option(item.name, item.code));
});
form.render('select');
});
});
// 城市选择监听事件
form.on('select(city)', function(data){
var cityCode = data.value;
var areaSelect = $('#area');
// 根据城市的选择获取区县数据
$.getJSON('区县数据接口?cityCode=' + cityCode, function(data){
areaSelect.empty();
areaSelect.append(new Option('请选择区县', ''));
$.each(data, function(index, item){
areaSelect.append(new Option(item.name, item.code));
});
form.render('select');
});
});
});
</script>
</body>
</html>
```
您需要替换示例代码中的"省份数据接口"、"城市数据接口"和"区县数据接口"为实际的接口地址,以获取相应的省市区数据。另外,您还需要根据实际情况进行数据的填充和处理。这里仅提供了一个基本的框架,您可以根据具体需求进行修改和扩展。
阅读全文