layui 三級關聯下拉框更新時回顯問題

最近接觸layui，比較簡潔美觀的一款ui，但也有很多小坑，記錄一下實作省市區下拉三級關聯更新回顯的問題

 <%--監聽省份選擇 --%>

 form.on('select(uprovinceId)', function(data){

    initCityList('change');

});

這裡面有個問題就是   選擇的時候    如果  請選擇  的value 是“” 空字元串，當選擇從河北省變到請選擇時不會觸發這個監聽事件

<script type="text/javaScript">

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("<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();

          });

});

}

<%--初始化區清單 --%>

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" style="margin-bottom: -8px;">

            <label class="layui-form-label">所負責區域</label>

            <div class="layui-inline">

            <div class="layui-input-inline" style="width: 90px;margin-right: 0px;margin-bottom: 0px;">

            <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" style="width: 90px;margin-right: 0px;margin-bottom: 0px;">

            <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" style="width: 90px;margin-right: 0px;margin-bottom: 0px;">

            <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">