麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

解決layui 三級聯動下拉框更新時回顯的問題

2019-11-19 10:54:57
字體:
來源:轉載
供稿:網友

最近接觸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">

以上這篇解決layui 三級聯動下拉框更新時回顯的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 日韩黄色av网站 | 国产91对白叫床清晰播放 | 成年人在线免费播放视频 | 成人国产精品色哟哟 | 国产午夜亚洲精品午夜鲁丝片 | 久久久国产精品成人免费 | 中文字幕电影免费播放 | 久久精品视频69 | 91精品观看91久久久久久国产 | 久久国产精品免费视频 | 亚洲小视频在线观看,com | 午夜精品久久久久久久久久久久久蜜桃 | 欧美精品在线免费观看 | 国产午夜免费 | 国产黄色毛片 | 欧美大片一级毛片 | 久久久久久久久久久久久久国产 | 一级做受毛片免费大片 | 成人午夜在线免费视频 | 国产精品午夜小视频观看 | 九九热视频在线免费观看 | 精品成人国产在线观看男人呻吟 | av电影在线观看免费 | 欧美成人免费香蕉 | 国产亚洲综合一区二区 | 国产一国产精品一级毛片 | 55夜色66夜色国产精品视频 | 成人激情视频网站 | 欧美一级做性受免费大片免费 | 成人毛片网 | 精品在线观看一区 | 手机在线看片国产 | 国产激情网 | 黄色一级片免费观看 | 久久久aa | 精品国产一区二区三区久久久蜜月 | 国产精品久久久久久婷婷天堂 | 91成人久久 | 久久国产经典 | 成人在线视频在线观看 | 色综合网在线观看 |