如何解決layui 三級聯(lián)動下拉框更新時回顯的問題

小編給大家分享一下如何解決layui 三級聯(lián)動下拉框更新時回顯的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近接觸layui，比較簡潔美觀的一款ui，但也有很多小坑，記錄一下實(shí)現(xiàn)省市區(qū)下拉三級聯(lián)動更新回顯的問題

 <%--監(jiān)聽省份選擇 --%>

 form.on('select(uprovinceId)', function(data){
  initCityList('change');
});

這里面有個問題就是  選擇的時候  如果 請選擇 的value 是“” 空字符串，當(dāng)選擇從河北省變到請選擇時不會觸發(fā)這個監(jiān)聽事件

<script type="text/javaScript">
layui.use(['form'],function(){
  var form = layui.form;
  <%--監(jiān)聽省份選擇 --%>
  form.on('select(uprovinceId)', function(data){
  initCityList('change');
});
<%--監(jiān)聽城市選擇 --%>
  form.on('select(ucityId)', function(data){
initDistrictList('change');
});
  <%--監(jiān)聽修改提交 --%>
    form.on('submit(update)', function(data){
   updateAccount();
   form.render();
 return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
});
});
<%-- 監(jiān)聽取消按鈕 --%>
$(document).on("click",".cancel",function(){ 
layer.closeAll("page");
}); 
$(function(){
<%--初始化省份列表 --%>
initProvinceList('init');
initCityList('init');
initDistrictList('init');
});
<%--初始化省份列表 --%>
function initProvinceList(flag){
var provinceId = $("#oldProvinceId").val();
$("#uprovinceId").append("<option value='" + -1 +"'>" + '請選擇' + "</option>");
$("#udistrictId").append("<option value='" + -1 + "'>" + '請選擇' + "</option>");
$("#ucityId").append("<option value='" + -1 + "'>" + '請選擇' + "</option>");
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("<option value='" + id + "' selected>" + name + "</option>");
         }else{
        $("#uprovinceId").append("<option value='" + id + "'>" + name + "</option>");
         }
       }
      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("<option value='" + -1 + "'>" + '請選擇' + "</option>");
$("#udistrictId").empty();
$("#udistrictId").append("<option value='" + -1 + "'>" + '請選擇' + "</option>");
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("<option value='" + id + "' selected>" + name + "</option>");
         }else{
        $("#ucityId").append("<option value='" + id + "'>" + name + "</option>");
         }
       }
       layui.use(['form'],function(){
       var form = layui.form;
       form.render();
     });
});
}
<%--初始化區(qū)列表 --%>
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("<option value='" + -1 + "'>" + '請選擇' + "</option>");
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("<option value='" + id + "' selected>" + name + "</option>");
         }else{
        $("#udistrictId").append("<option value='" + id + "'>" + name + "</option>");
         }
       }
       layui.use(['form'],function(){
       var form = layui.form;
       form.render();
     });
});
}

</script>

      <div class="layui-form-item city" >
      <label class="layui-form-label">所負(fù)責(zé)區(qū)域</label>
      <div class="layui-inline">
      <div class="layui-input-inline" >
      <select id="uprovinceId" name="provinceId" lay-verify="required" lay-search="" lay-filter="uprovinceId">
      <!-- <option value="-1">請選擇</option> -->
      </select>
      </div>
      </div>
      <div class="layui-inline">
      <div class="layui-input-inline" >
      <select id="ucityId" name="cityId" lay-verify="required" lay-search="" lay-filter="ucityId" οnchange="initDistrictList()">
      <!-- <option value="-1">請選擇</option> -->
      </select>
      </div>
      </div>
      <div class="layui-inline">
      <div class="layui-input-inline" >
      <select id="udistrictId" name="districtId" lay-verify="required" lay-search="">
      <!-- <option value="-1">請選擇</option> -->
      </select>
      </div>
      </div>
      </div>

<input type = "hidden" value="${admin.provinceId }" id="oldProvinceId">
<input type = "hidden" value="${admin.cityId }" id="oldCityId">
<input type = "hidden" value="${admin.districtId }" id="oldDistrictId">

以上是“如何解決layui 三級聯(lián)動下拉框更新時回顯的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！