利用JavaScript如何實現省市連動

這篇文章主要為大家詳細介紹了解決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=&#39;"+bankProvinces[i][0]+"&#39;>"+bankProvinces[i][0]+"</option>");
   }
   
  },
  &#39;cache&#39; : false,
  &#39;async&#39; : 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=&#39;"+cities[i][0]+"&#39;>"+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=&#39;"+cities[i][0]+"&#39;>"+cities[i][0]+"</option>");
   }
  },
 &#39;cache&#39;:false,
 &#39;async&#39;:false,
 });

在初始化的時候就依照省份載入一遍就可以了。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在Vue中有關響應式原理（詳細教學）

使用js如何實作時間戳記與日期格式之間轉換

在vue.js中有關預設路由不載入問題

#

以上是利用JavaScript如何實現省市連動的詳細內容。更多資訊請關注PHP中文網其他相關文章！