解决layui 三级联动下拉框更新时回显的问题


Posted in Javascript onSeptember 03, 2019

最近接触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 三级联动下拉框更新时回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
js实现导航跟随效果
Nov 17 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
Node.js学习教程之Module模块
Sep 03 #Javascript
vue动态绘制四分之三圆环图效果
Sep 03 #Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 #Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 #Javascript
JavaScript Array对象基本方法详解
Sep 03 #Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 #Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
You might like
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python实现剪切功能
2019/01/23 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Why we need EJB
2016/10/20 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
优秀班组申报材料
2014/12/25 职场文书
安全承诺书
2015/01/19 职场文书
2015年药房工作总结
2015/04/25 职场文书
追讨欠款律师函
2015/05/27 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS