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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
Node.js编码规范
Jul 14 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
mysql建立外键
2006/11/25 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
公司前台辞职报告
2014/01/19 职场文书
cf收人广告词
2014/03/14 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python