网站首页 文章专栏 php+layui 实现前端平滑的三级联动
三级联动前端部分,直接采用layui提供的代码:
<div class="layui-form-item" id="area-picker"> <div class="layui-form-label">网点地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1"> <option value="">请选择省</option> </select> </div> <div class="layui-input-inline" style="width: 200px;"> <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1"> <option value="">请选择市</option> </select> </div> <div class="layui-input-inline" style="width: 200px;"> <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1"> <option value="">请选择区</option> </select> </div> </div> <script src="http://adminapi.fdt.cc/lib/layui/layui.js"></script> <script type="text/javascript" src="./js/xcity.js"></script> <script> layui.use(['form','code'], function(){ form = layui.form; $('#start').xcity(); //请求后端 ajax('请求后端地址', '', function (data) { provinceList = data.data; $('#start').xcity(); }); }); </script>
xcity.js文件内容为:
$.fn.xcity = function (pName, cName, aName) { this.p = $(this).find('select[lay-filter=province]'); this.c = $(this).find('select[lay-filter=city]'); this.a = $(this).find('select[lay-filter=area]'); this.cityList = []; this.reaList = []; this.showP = function (provinceList) { this.p.html(''); is_pName = false; for (var i in provinceList) { if (pName == provinceList[i].id) { is_pName = true; this.cityList = provinceList[i].child; this.p.append("<option selected value='" + provinceList[i].id + "'>" + provinceList[i].name + "</option>") } else { this.p.append("<option value='" + provinceList[i].id + "'>" + provinceList[i].name + "</option>") } } if (!is_pName) { this.cityList = provinceList[0].child; } } this.showC = function (cityList) { if (this.cityList == undefined) { this.c.html(''); return; } this.c.html(''); is_cName = false; for (var i in cityList) { if (cName == cityList[i].id) { is_cName = true; this.areaList = cityList[i].child; this.c.append("<option selected value='" + cityList[i].id + "'>" + cityList[i].name + "</option>") } else { this.c.append("<option value='" + cityList[i].id + "'>" + cityList[i].name + "</option>") } } if (!is_cName) { this.areaList = cityList[0].child; } } this.showA = function (areaList) { this.a.html(''); for (var i in areaList) { if (aName == areaList[i]) { this.a.append("<option selected value='" + areaList[i].id + "'>" + areaList[i].name + "</option>") } else { this.a.append("<option value='" + areaList[i].id + "'>" + areaList[i].name + "</option>") } } } this.showP(provinceList); this.showC(this.cityList); this.showA(this.areaList); var form = layui.form; form.render('select'); form.on('select(province)', function (data) { var pName = data.value; $(data.elem).parents(".x-city").xcity(pName); }); form.on('select(city)', function (data) { var cName = data.value; var pName = $(data.elem).parents(".x-city").find('select[lay-filter=province]').val(); $(data.elem).parents(".x-city").xcity(pName, cName); }); form.render('select'); return this; }; var provinceList = [];
对应的后端接口返回数据格式为:
["id" => 1, "name" => "名称", "child" => [ "id" => 1, "name" => "子级名称", "child" => [ "id" => 1, "name" => "第三级名称", ] ] ];
转载请注明出处