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 EasyUI的formatter格式化函数代码
Jan 12 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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 无限极分类
2008/03/27 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
Validform表单验证总结篇
2016/10/31 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
vue做网页开场视频的实例代码
2017/10/20 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
python自带的http模块详解
2016/11/06 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python之文字转图片方法
2018/05/10 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
给国外客户的邀请函
2014/01/30 职场文书
新员工入职感言
2014/02/01 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
业务员岗位职责范本
2015/04/03 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
公司与个人合作协议书
2016/03/19 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
redis中lua脚本使用教程
2021/11/01 Redis
Python函数中apply、map、applymap的区别
2021/11/27 Python