layui多级联动下拉框的实现_解决layui 三级联动下拉框更新时回显的问题
最近接触layui，比较简洁美观的一款ui，但也有很多小坑，记录一下实现省市区下拉三级联动更新回显的问题
form.on('select(uprovinceId)', function(data){
initCityList('change');
});
这里面有个问题就是 选择的时候 如果 请选择 的value 是“” 空字符串，当选择从河北省变到请选择时不会触发这个监听事件
layui.use(['form'],function(){
var form = layui.form;
form.on('select(uprovinceId)', function(data){
initCityList('change');
});
form.on('select(ucityId)', function(data){
initDistrictList('change');
});
form.on('submit(update)', function(data){
updateAccount();
form.render();
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
$(document).on("click",".cancel",function(){
layer.closeAll("page");
});
$(function(){
initProvinceList('init');
initCityList('init');
initDistrictList('init');
});
function initProvinceList(flag){
var provinceId = $("#oldProvinceId").val();
$("#uprovinceId").append("" + '请选择' + "");
$("#udistrictId").append("" + '请选择' + "");
$("#ucityId").append("" + '请选择' + "");
var url = "${ctx}/admin/getProvinceList.action?ranNum="+Math.random();
$.post(url,{},function(data){
var list = eval(data);
for (i = 0; i < list.length; i++) {
var name = list[i].province;
var id = list[i].id;
if(id == provinceId){
$("#uprovinceId").append("" + name + "");
}else{
$("#uprovinceId").append("" + name + "");
}
}
layui.use(['form'],function(){
var form = layui.form;
form.render();
});
});
}
function initCityList(flag){
var provinceId = $("#uprovinceId").val();
var oldProvinceId = $("#oldProvinceId").val();
if(provinceId == -1 && flag == "init"){
provinceId = oldProvinceId;
}
var cityId = $("#oldCityId").val();
$("#ucityId").empty();
$("#ucityId").append("" + '请选择' + "");
$("#udistrictId").empty();
$("#udistrictId").append("" + '请选择' + "");
var url = "${ctx}/admin/getCityList.action?ranNum="+Math.random();
$.post(url,{provinceId:provinceId},function(data){
var list = eval(data);
alert(list.length+"list长度");
for (i = 0; i < list.length; i++) {
var name = list[i].city;
var id = list[i].id;
if(id == cityId){
$("#ucityId").append("" + name + "");
}else{
$("#ucityId").append("" + name + "");
}
}
layui.use(['form'],function(){
var form = layui.form;
form.render();
});
});
}
function initDistrictList(flag){
var cityId = $("#ucityId").val();
var oldCityId = $("#oldCityId").val();
if(cityId == -1 && flag == "init"){
cityId = oldCityId;
}
var districtId = $("#oldDistrictId").val();
$("#udistrictId").empty();
$("#udistrictId").append("" + '请选择' + "");
var url = "${ctx}/admin/getDistrictList.action?ranNum="+Math.random();
$.post(url,{cityId:cityId},function(data){
var list = eval(data);
for (i = 0; i < list.length; i++) {
var name = list[i].district;
var id = list[i].id;
if( id == districtId){
$("#udistrictId").append("" + name + "");
}else{
$("#udistrictId").append("" + name + "");
}
}
layui.use(['form'],function(){
var form = layui.form;
form.render();
});
});
}
所负责区域
以上这篇解决layui 三级联动下拉框更新时回显的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。