首頁 > 文章 > web前端 > 利用JavaScript如何實現省市連動

利用JavaScript如何實現省市連動

亚连原創: 2018-06-22 17:19:132195瀏覽

這篇文章主要為大家詳細介紹了解決JavaScript實現省市聯動過程中的bug，具有一定的參考價值，有興趣的小伙伴們可以參考一下

先把實現省市聯動遇到的問題描述一下

1.1.原來的想法

1.1.1、初始化載入省份

$.ajax({
  &#39;type&#39; : &#39;POST&#39;,
  &#39;dataType&#39; : &#39;json&#39;,
  &#39;url&#39; : &#39;${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces&#39;,
  &#39;success&#39; : 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({
 &#39;type&#39;:&#39;POST&#39;,
 &#39;data&#39;: {"province":DSGAprovince}, 
 &#39;dataType&#39;: &#39;json&#39;,
 &#39;url&#39;:&#39;${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankCities&#39;,
 &#39;success&#39; : 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 = &#39;海南省&#39;;
 if(tVal!=""){$("#key_DSGAprovince").val(tVal);}
 
 var tVal = &#39;文昌&#39;;
 if(tVal!=""){$("#key_DSGAcity").val(tVal);}

1.1.4、分析

這是因為在初始化的時候，只是加載進來省份了，而if(tVal!=""){$("#key_DSGAcity"). val(tVal);}這句話的意思是說必須前提條件把城市的option裡面放到頁面才能取出來值。

1.1.5、解決方案

var DSGAprovince = &#39;${myObj.DSGAprovince?default("请选择")}&#39;;
 $.ajax({
 &#39;type&#39;:&#39;POST&#39;,
 &#39;data&#39;: {"province":DSGAprovince}, 
 &#39;dataType&#39;: &#39;json&#39;,
 &#39;url&#39;:&#39;${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankCities&#39;,
 &#39;success&#39; : 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中文網其他相關文章！

JavaScript vue.js if JS bug

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在JS中有關document.write()的用法（詳細教學）下一篇：在JS中有關document.write()的用法（詳細教學）

看更多