JavaScript实现省市联动过程中bug的解决方法


Posted in Javascript onDecember 04, 2017

本文为大家分享了JavaScript实现省市联动过程中bug的解决方法,供大家参考,具体内容如下

先把实现省市联动遇到的问题描述一下

1.1.原来的思路

1.1.1、初始化加载省份

$.ajax({
 'type' : 'POST',
 'dataType' : 'json',
 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces',
 'success' : function(msg) {
  bankProvinces = msg;
  for(var i=0;i<bankProvinces.length;i++){
  $("#key_DSGAprovince").append("<option value='"+bankProvinces[i][0]+"'>"+bankProvinces[i][0]+"</option>");
  }
  
 },
 'cache' : false,
 'async' : false
 });

1.1.2、当点击省份的时候加载城市

function getBankCitys(){
$("#key_DSGAcity").empty();
 var DSGAprovince=$("#key_DSGAprovince option:selected").text();
 $.ajax({
 'type':'POST',
 'data': {"province":DSGAprovince}, 
 'dataType': 'json',
 'url':'${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankCities',
 'success' : function(msg) {
  cities = msg;
  for(var i=0;i<cities.length;i++){
  $("#key_DSGAcity").append("<option value='"+cities[i][0]+"'>"+cities[i][0]+"</option>");

  }
 },

 });
}

1.1.3、问题点

当加载的时候是没有问题的能实现联动,但是当回显的时候是不能加载城市的,但是省份能加载进来。

var tVal = '海南省';
 if(tVal!=""){$("#key_DSGAprovince").val(tVal);}
 
 var tVal = '文昌';
 if(tVal!=""){$("#key_DSGAcity").val(tVal);}

1.1.4、分析

这是因为在初始化的时候,只是加载进来省份了,而if(tVal!=""){$("#key_DSGAcity").val(tVal);}这句话的意思就是说必须前提条件把城市的option里面放到页面才能取出来值。

1.1.5、解决方案

var DSGAprovince = '${myObj.DSGAprovince?default("请选择")}';

 $.ajax({
 'type':'POST',
 'data': {"province":DSGAprovince}, 
 'dataType': 'json',
 'url':'${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankCities',
 'success' : function(msg) {
  cities = msg;
  for(var i=0;i<cities.length;i++){
  $("#key_DSGAcity").append("<option value='"+cities[i][0]+"'>"+cities[i][0]+"</option>");
  }
 },
 'cache':false,
 'async':false,
 });

在初始化的时候就根据省份加载一遍就可以了。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
常用的js方法合集
Mar 10 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
浅谈 vue 中的 watcher
Dec 04 #Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 #Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 #Javascript
微信小程序tabBar用法实例详解
Dec 04 #Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 #Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
You might like
php设计模式 Delegation(委托模式)
2011/06/26 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
Python检测生僻字的实现方法
2016/10/23 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
机电专业毕业生推荐信
2013/11/10 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
在职证明范本
2015/06/15 职场文书
教师节晚会主持词
2015/06/30 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
Python 绘制多因子柱状图
2022/05/11 Python