通过监听layui的form模块的选择事件，我们可以加载对应的下级数据并动态填充到下级选择框中。在选择省、市和区县时，上一级选择框的值将作为下一级选择框的查询条件。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>城市三级联动</title></head><body> <div class="layui-form"> <div class="layui-form-item"> <div class="layui-inline"> <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-inline"> <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-inline"> <label class="layui-form-label">区县</label> <div class="layui-input-block"> <select id="district" lay-filter="district"> <option value="">请选择区/县</option> </select> </div> </div> </div></div> <script>layui.use(['form'], function(){ var form = layui.form; // 加载省份数据 var provinces = [ { district_id: 1, district_name: '北京市' }, { district_id: 2, district_name: '上海市' }, { district_id: 3, district_name: '广东省' } // 其他省份数据... ]; var provinceSelect = $('#province'); $.each(provinces, function(index, province){ provinceSelect.append(new Option(province.district_name, province.district_id)); }); form.render('select'); // 监听省份选择事件 form.on('select(province)', function(data){ var provinceId = data.value; if(provinceId){ // 加载市级数据（这里使用假数据） var cities = [ { district_id: 101, district_name: '市辖区', pid: 1 }, { district_id: 102, district_name: '市辖区', pid: 2 }, { district_id: 103, district_name: '广州市', pid: 3 } // 其他市级数据... ]; var citySelect = $('#city'); citySelect.empty().append(new Option('请选择市', '')); $.each(cities, function(index, city){ if(city.pid == provinceId){ citySelect.append(new Option(city.district_name, city.district_id)); } }); form.render('select'); }else{ $('#city').empty().append(new Option('请选择市', '')); $('#district').empty().append(new Option('请选择区/县', '')); form.render('select'); } }); // 监听市级选择事件 form.on('select(city)', function(data){ var cityId = data.value; if(cityId){ // 加载区县级数据（这里使用假数据） var districts = [ { district_id: 1001, district_name: '东城区', pid: 101 }, { district_id: 1002, district_name: '西城区', pid: 101 }, { district_id: 1003, district_name: '黄浦区', pid: 102 }, { district_id: 1004, district_name: '徐汇区', pid: 102 }, { district_id: 1005, district_name: '天河区', pid: 103 } // 其他区县级数据... ]; var districtSelect = $('#district'); districtSelect.empty().append(new Option('请选择区/县', '')); $.each(districts, function(index, district){ if(district.pid == cityId){ districtSelect.append(new Option(district.district_name, district.district_id)); } }); form.render('select'); }else{ $('#district').empty().append(new Option('请选择区/县', '')); form.render('select'); } });});</script> </body></html> |