解决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 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
详解CocosCreator消息分发机制
Apr 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
Protoss建筑一览
2020/03/14 星际争霸
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
pip安装python库的方法总结
2019/08/02 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python实现logistic分类算法代码
2020/02/28 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
C#面试题
2016/05/06 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
个人公开承诺书
2014/03/28 职场文书
交通事故协议书
2014/04/15 职场文书
国庆节标语大全
2014/10/08 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
实验心得体会范文
2016/01/25 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js