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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
基于python监控程序是否关闭
2020/01/14 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
青年志愿者活动总结
2014/04/26 职场文书
工会主席事迹材料
2014/06/03 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
民政工作个人总结
2015/02/28 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书