解决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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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获取网络上文件
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
vue之延时刷新实例
2019/11/14 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python实现二叉搜索树
2016/02/03 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
python 实现表情识别
2020/11/21 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
大学生毕业自荐信
2013/10/10 职场文书
面料业务员岗位职责
2013/12/26 职场文书
实习生岗位职责
2014/04/12 职场文书
物业管理专业自荐信
2014/07/01 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
机械专业求职信范文
2014/07/15 职场文书
创先争优演讲稿
2014/09/15 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Javascript设计模式之原型模式详细
2021/10/05 Javascript