SoFunction
Updated on 2025-04-08

Solve the problem of echoing when the layui three-level linkage drop-down box is updated

Recently, I came into contact with Layui, a relatively simple and beautiful ui, but there are many small pitfalls. Let me record the problem of implementing the three-level linkage update of pull-down in provinces, cities and districts.

 <%--Listen to province selection --%>

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

There is a problem here: When selecting, if the value of the request is "" is an empty string, this listening event will not be triggered when the selection changes from Hebei Province to Please select.

<script type="text/javaScript">
(['form'],function(){
  var form = ;
  <%--Listen to province selection --%>
  ('select(uprovinceId)', function(data){
  initCityList('change');
});
<%--Listen to city selection --%>
  ('select(ucityId)', function(data){
initDistrictList('change');
});
  <%--Listen to modify and submit --%>
    ('submit(update)', function(data){
   updateAccount();
   ();
 return false; //Stop the form from jumping.  If you need a form jump, just remove this section.});
});
<%-- Listen to Cancel button --%>
$(document).on("click",".cancel",function(){ 
("page");
}); 
$(function(){
<%--Initialize the province list --%>
initProvinceList('init');
initCityList('init');
initDistrictList('init');
});
<%--Initialize the province list --%>
function initProvinceList(flag){
var provinceId = $("#oldProvinceId").val();
$("#uprovinceId").append("<option value='" + -1 +"'>" + 'Please select ' + "</option>");$("#udistrictId").append("<option value='" + -1 + "'>" + 'Please select ' + "</option>");$("#ucityId").append("<option value='" + -1 + "'>" + 'Please select ' + "</option>");var url = "${ctx}/admin/?ranNum="+();
$.post(url,{},function(data){
var list = eval(data);
       for (i = 0; i &lt; ; i++) {
         var name = list[i].province;
         var id = list[i].id;
         if(id == provinceId){
         $("#uprovinceId").append("&lt;option value='" + id + "' selected&gt;" + name + "&lt;/option&gt;");
         }else{
        $("#uprovinceId").append("&lt;option value='" + id + "'&gt;" + name + "&lt;/option&gt;");
         }
       }
      (['form'],function(){
       var form = ;
       ();
     });
});
}
&lt;%--Initialize the city list --%&gt;
function initCityList(flag){
var provinceId = $("#uprovinceId").val();
var oldProvinceId = $("#oldProvinceId").val();
if(provinceId == -1 &amp;&amp; flag == "init"){
provinceId = oldProvinceId; 
}
var cityId = $("#oldCityId").val();
$("#ucityId").empty();
$("#ucityId").append("<option value='" + -1 + "'>" + 'Please select ' + "</option>");$("#udistrictId").empty();
$("#udistrictId").append("<option value='" + -1 + "'>" + 'Please select ' + "</option>");var url = "${ctx}/admin/?ranNum="+();
$.post(url,{provinceId:provinceId},function(data){
var list = eval(data);
alert(+"list length");
       for (i = 0; i &lt; ; i++) {
         var name = list[i].city;
         var id = list[i].id;
         if(id == cityId){
         $("#ucityId").append("&lt;option value='" + id + "' selected&gt;" + name + "&lt;/option&gt;");
         }else{
        $("#ucityId").append("&lt;option value='" + id + "'&gt;" + name + "&lt;/option&gt;");
         }
       }
       (['form'],function(){
       var form = ;
       ();
     });
});
}
&lt;%--Initialization area list --%&gt;
function initDistrictList(flag){
var cityId = $("#ucityId").val();
var oldCityId = $("#oldCityId").val();
if(cityId == -1 &amp;&amp; flag == "init"){
cityId = oldCityId;
}
var districtId = $("#oldDistrictId").val();
$("#udistrictId").empty();
$("#udistrictId").append("<option value='" + -1 + "'>" + 'Please select ' + "</option>");var url = "${ctx}/admin/?ranNum="+();
$.post(url,{cityId:cityId},function(data){
var list = eval(data);
       for (i = 0; i &lt; ; i++) {
         var name = list[i].district;
         var id = list[i].id;
         if( id == districtId){
         $("#udistrictId").append("&lt;option value='" + id + "' selected&gt;" + name + "&lt;/option&gt;");
         }else{
        $("#udistrictId").append("&lt;option value='" + id + "'&gt;" + name + "&lt;/option&gt;");
         }
       }
       (['form'],function(){
       var form = ;
       ();
     });
});
}

&lt;/script&gt;

      &lt;div class="layui-form-item city" style="margin-bottom: -8px;"&gt;
      &lt;label class="layui-form-label"&gt;Areas responsible&lt;/label&gt;
      &lt;div class="layui-inline"&gt;
      &lt;div class="layui-input-inline" style="width: 90px;margin-right: 0px;margin-bottom: 0px;"&gt;
      &lt;select  name="provinceId" lay-verify="required" lay-search="" lay-filter="uprovinceId"&gt;
      &lt;!-- &lt;option value="-1"&gt;Please select&lt;/option&gt; --&gt;
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="layui-inline"&gt;
      &lt;div class="layui-input-inline" style="width: 90px;margin-right: 0px;margin-bottom: 0px;"&gt;
      &lt;select  name="cityId" lay-verify="required" lay-search="" lay-filter="ucityId" οnchange="initDistrictList()"&gt;
      &lt;!-- &lt;option value="-1"&gt;Please select&lt;/option&gt; --&gt;
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="layui-inline"&gt;
      &lt;div class="layui-input-inline" style="width: 90px;margin-right: 0px;margin-bottom: 0px;"&gt;
      &lt;select  name="districtId" lay-verify="required" lay-search=""&gt;
      &lt;!-- &lt;option value="-1"&gt;Please select&lt;/option&gt; --&gt;
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;

&lt;input type = "hidden" value="${ }" &gt;
&lt;input type = "hidden" value="${ }" &gt;
&lt;input type = "hidden" value="${ }" &gt;

The above article solves the problem echoing when the layui three-level linkage drop-down box is updated. It is all the content I share with you. I hope you can give you a reference and I hope you can support me more.