解决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 相关文章推荐
js一组验证函数
Dec 20 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
Javascript浅谈之this
Dec 17 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
layui文件上传实现代码
May 20 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Django配置跨域并开发测试接口
2020/11/04 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
学雷锋月活动总结
2014/04/25 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
亮剑观后感500字
2015/06/05 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
Docker部署Mysql8的实现步骤
2022/07/07 Servers