解决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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
URI、URL和URN之间的区别与联系
Dec 20 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP与以太坊交互详解
2018/08/24 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
python实现SOM算法
2018/02/23 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python async with和async for的使用
2019/06/20 Python
python装饰器原理与用法深入详解
2019/12/19 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
酒店总经理工作职责
2013/12/13 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
四查四看剖析材料
2014/02/14 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Golang的继承模拟实例
2021/06/30 Golang
Ajax实现三级联动效果
2021/10/05 Javascript