layui实现省市区联动p
省市区插件是我们项目中常用的,由于layui官方没有联动所以自己做了一个,代码如下
<div class="layui-form-item"> <label class="layui-form-label">所属省份</label> <div class="layui-input-inline" id="one-level"> <select name="cate_id" lay-filter="one-level"> <option value="">请选择省</option> <option value="3">福建省</option> <option value="11">广东</option> </select> </div> <div class="layui-input-inline"> <select name="cate_id" id="two-level" lay-filter="two-level"></select> </div> <div class="layui-input-inline"> <select name="cate_id" id="three-level" lay-filter="three-level"> </select> </div></div>
2.js代码
form.on('select(one-level)', function(data){ if (data.value == '') { $("#two-level option").remove(); $("#three-level option").remove(); form.render('select'); return false; } $.ajax({ type: "post", url: "/control/getAreaList", //接口地址 data:{parent_id:data.value,type:2},//参数 success: function(result) { result = JSON.parse(result); $("#two-level option").remove(); $('#two-level').append('<option value="">请选择市</option>'); $.each(result.data, function(k, v) { $('#two-level').append('<option value="' + v.id + '">' + v.name + '</option>'); form.render('select'); }); }, });});form.on('select(two-level)', function(data){ if (data.value == '') { $("#three-level option").remove(); form.render('select'); return false; } $.ajax({ type: "get", url: "/control/getAreaList", //替换为接口地址 data:{parent_id:data.value,type:3},//参数 success: function(result) { result = JSON.parse(result); $("#three-level option").remove(); $('#three-level').append('<option value="">请选择区</option>'); $.each(result.data, function(k, v) { $('#three-level').append('<option value="' + v.id + '">' + v.name + '</option>'); form.render('select'); }); }, });});