layui框架----下拉框的二级联动回显数据

### Layui 框架实现下拉框二级联动并回显数据 在Layui框架中，要实现在表单提交后能够正确显示已有的选择项（即回显），并且保持两个下拉菜单之间的级联关系，可以按照如下方法操作。 对于页面上的HTML结构部分，定义好用于展示一级分类和地区子集的`<select>`标签容器[^3]： ```html <div class="layui-form-item"> <label class="layui-form-label">省份</label> <div class="layui-input-inline"> <select name="province" id="province" lay-filter="province"></select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" id="city" lay-filter="city"></select> </div> </div> ``` 为了使上述组件正常工作，在JavaScript端需加载必要的插件以及初始化配置。这里采用的是Element UI提供的中国地区数据包来填充省市选项列表[^1]： ```javascript // 导入所需的地图数据模块 import { CodeToText, regionData, TextToCode } from 'element-china-area-data'; // 初始化layui环境中的form模块实例化对象 let form = null; layui.use(['form'], function(){ form = layui.form; // 动态构建省份数组供第一个<select>使用 let provinceOptions = ''; Object.keys(regionData).forEach(provinceCode => { const provinceName = CodeToText[provinceCode]; provinceOptions += `<option value="${provinceCode}">${provinceName}</option>`; }); document.getElementById('province').innerHTML = provinceOptions; form.render('select'); // 渲染select元素 // 设置监听器处理当选择了某个省份时更新对应的城市列表 form.on('select(province)', function(data){ updateCitiesByProvinceId(data.value); }); }); function updateCitiesByProvinceId(selectedProvinceId) { // 根据所选省份ID获取其下属城市的集合，并据此刷新第二个<select> let cityOptions = '<option value="">请选择市</option>'; if (selectedProvinceId !== '') { Object.values(TextToCode).filter(item => item.provinceCode === selectedProvinceId) .forEach(cityItem => { cityOptions += `<option value="${cityItem.cityCode}">${cityItem.city}</option>`; }); document.getElementById('city').innerHTML = cityOptions; form.render('select'); } } ``` 针对已经存在的记录条目的编辑场景下的数据回显需求，则可以在页面初次加载完毕之后通过AJAX请求或其他方式取得当前实体的信息，再调用相应的接口设置默认值给这两个控件[^2]： ```javascript // 假设这是从服务器接收到的对象形式的数据 const existingRecord = {"province": "440000", "city": "440100"}; document.addEventListener("DOMContentLoaded", () => { setTimeout(() => { // 更新省份<select>, 并触发一次change事件以同步关联的城市列表 $('#province')[0].value = existingRecord['province']; form.val('example', {'province': existingRecord['province']}); form.change($('#province')); // 如果有具体到某座城市的话也一并设定上去 if(existingRecord['city']){ $('#city')[0].value = existingRecord['city']; form.val('example', {'city': existingRecord['city']}); } form.render(); // 刷新整个表单的状态 }, 0); }); ``` 此段代码展示了如何利用Layui框架配合其他库完成一个简单的两级地址选择功能的同时支持保存后的再次查看时自动恢复之前的选择状态的功能。