解决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实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
Javascript的闭包详解
Dec 26 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JS实现简单日历特效
Jan 03 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 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程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python批量处理txt文件的实例代码
2020/01/13 Python
python怎么自定义捕获错误
2020/06/29 Python
技术人员面试提纲
2013/11/28 职场文书
法制宣传月活动总结
2014/04/29 职场文书
物业消防安全责任书
2014/07/23 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
MySQL导致索引失效的几种情况
2022/06/25 MySQL