JavaScript實現(xiàn)省市聯(lián)動過程中bug的解決方法

更新時間：2017年12月04日 11:55:32 作者：風雨前行

這篇文章主要為大家詳細介紹了解決JavaScript實現(xiàn)省市聯(lián)動過程中的bug，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了JavaScript實現(xiàn)省市聯(lián)動過程中bug的解決方法，供大家參考，具體內(nèi)容如下

先把實現(xiàn)省市聯(lián)動遇到的問題描述一下

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、問題點

當加載的時候是沒有問題的能實現(xiàn)聯(lián)動，但是當回顯的時候是不能加載城市的，但是省份能加載進來。

 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,
 });

在初始化的時候就根據(jù)省份加載一遍就可以了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js中獲取事件對象的方法小結(jié)
事件對象的獲取很簡單，很久前我們就知道IE中事件對象是作為全局對象( window.event )存在的，F(xiàn)irefox中則是做為句柄( handler )的第一個參數(shù)傳入內(nèi)的。所以一行代碼就可以搞定
2011-03-03
ES6 Promise.race的用法詳解
本文主要介紹了ES6 Promise.race的用法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-09-09
JavaScript實現(xiàn)的七種排序算法總結(jié)（推薦?。?/a>
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)的七種排序算法的相關資料,七種排序算法分別是：冒泡排序、選擇排序、插入排序、希爾排序、堆排序、快速排序以及歸并排序,需要的朋友可以參考下
2021-07-07

javascript創(chuàng)建createXmlHttpRequest對象示例代碼
這篇文章主要介紹了javascript創(chuàng)建createXmlHttpRequest對象的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
JavaScript實現(xiàn)多維數(shù)組的方法
這篇文章主要介紹了JavaScript實現(xiàn)多維數(shù)組的方法，有需要的朋友可以參考一下
2013-11-11
html嵌入javascript代碼的三種方式
本文詳細介紹了html嵌入javascript代碼的三種主要方式：腳本塊的方式、引入外部獨立的.js文件、事件句柄是以html標簽的屬性存在的，有感興趣了解的同學可以借鑒閱讀
2023-03-03
JavaScript Ajax實現(xiàn)異步通信
這篇文章主要為大家詳細介紹了JavaScript Ajax實現(xiàn)異步通信的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
純JavaScript實現(xiàn)的分頁插件實例
這篇文章主要介紹了純JavaScript實現(xiàn)的分頁插件,涉及javascript結(jié)合php動態(tài)實現(xiàn)分頁效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
使用canvas實現(xiàn)有趣的彈簧效果
這篇文章主要為大家詳細介紹了如何使用canvas實現(xiàn)有趣的彈簧效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解一下
2023-12-12
微信小程序?qū)崿F(xiàn)打卡日歷功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)打卡日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11