JavaScript를 사용하여 지방과 도시를 연결하는 방법

이 글은 주로 자바스크립트를 통해 지방자치단체 연계를 구현하는 과정에서 발생한 버그를 해결하는 방법을 자세히 소개하고 있습니다. 관심 있는 친구들이 참고할 수 있습니다.

먼저 지방자치단체를 구현하는 과정에서 발생하는 문제점을 설명하겠습니다.

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);} 문장이 나오기 때문입니다. 이는 값을 꺼내기 전에 도시 옵션을 페이지에 배치해야 한다는 의미입니다.

1.1.5, Solution

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!