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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php的常量和变量实例详解
2017/06/27 PHP
php实现网页端验证码功能
2017/07/11 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
python Zmail模块简介与使用示例
2020/12/19 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
师德师风建设方案
2014/05/08 职场文书
统计专业自荐书
2014/07/06 职场文书
求职信的正确写法
2014/07/10 职场文书
关于远足的感想
2015/08/10 职场文书
保护环境建议书作文400字
2015/09/14 职场文书