本文主要是介绍通过layui实现省市区下拉列表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
layui如何引用，下文就不提了
首先，你需要将 area.json 文件引入到你的 HTML 页面中。确保 area.json 文件在相同的目录下，并且可以通过相对路径进行访问。
接下来，你可以使用以下代码来通过 Layui 实现省市区的下拉列表选择器：
HTML 代码：
<form class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">省份</label><div class="layui-input-inline"><select name="province" id="province" lay-filter="province"><option value="">请选择省份</option></select></div></div><div class="layui-inline"><label class="layui-form-label">城市</label><div class="layui-input-inline"><select name="city" 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 name="area" id="area" lay-filter="area"><option value="">请选择区县</option></select></div></div></div>
</form>
JavaScript 代码：
layui.use(['form'], function() {var form = layui.form;// 读取并解析 area.json 文件$.getJSON('/static/area3.json', function(data) {console.log('data:',data);var provinces = data;// 渲染省份选项for (var i = 0; i < provinces.length; i++) {var option = '<option value="' + provinces[i].value + '">' + provinces[i].text + '</option>';$('#province').append(option);}form.render('select'); // 重新渲染省份选项// 监听省份选择form.on('select(province)', function(data) {console.log('data:',data);var provinceCode = data.value;// 清空城市和区县选项$('#city').html('<option value="">请选择城市</option>');$('#area').html('<option value="">请选择区县</option>');// 根据选择的省份代码，动态生成城市选项var cities = null;for (var i = 0; i < provinces.length; i++) {if (provinces[i].value === provinceCode) {cities = provinces[i].children;break;}}if (cities) {for (var j = 0; j < cities.length; j++) {var option = '<option value="' + cities[j].value + '">' + cities[j].text + '</option>';$('#city').append(option);}}form.render('select'); // 重新渲染城市选项});// 监听城市选择form.on('select(city)', function(data) {console.log('data:',data);var cityCode = data.value;// 清空区县选项$('#area').html('<option value="">请选择区县</option>');// 根据选择的城市代码，动态生成区县选项var areas = null;for (var i = 0; i < provinces.length; i++) {var cities = provinces[i].children;for (var j = 0; j < cities.length; j++) {if (cities[j].value === cityCode) {areas = cities[j].children;break;}}if (areas) {for (var k = 0; k < areas.length; k++) {var option = '<option value="' + areas[k].value + '">' + areas[k].text + '</option>';$('#area').append(option);}}}form.render('select'); // 重新渲染区县选项});form.on('select(area)', function(data) {console.log('data:',data);form.render('select'); // 重新渲染区县选项});});
});
这篇关于通过layui实现省市区下拉列表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
