JQuery와 HTML() 메소드는 다음

Question

작동하지 않습니다 내 코드입니다 :

$(function() { 

    var region = $('#region'); 

    var city = $('#city'); 

    var pickedRegionId = region.find(':selected').val(); 

    var options; 

    if (pickedRegionId === '') { 
     console.log('region is empty, html() and disable'); 
     city.html(''); 
     city.attr('disabled', true); 
    } 

    region.change(function(){ 
     console.log('region is changed'); 
     pickedRegionId = $(this).val(); 
     if (pickedRegionId !== '') { 
      city.html(''); 
      console.log('loading cities'); 
      getCities(pickedRegionId); 
     } 
    }); 

    function getCities (regionId) { 
     city.attr('disabled', true); 
     city.html('<option>Loading...</option>'); 

     $.get(
      '/ajax/get_cities', 
      'region_id='+regionId, 
      function (responce) { 
       if (responce.result === 'success') { 
        $(responce.cities).each(function(){ 
         options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>'; 
        }); 
        city.html(options); 
        city.attr('disabled', false); 
       } 
      }, 'json' 
     ); 
    } 
}); 

페이지가로드 모두 괜찮 때, 나는 어떤 지역을 선택하고 아약스 데이터로 채워 도시와 선택은. 그러나 다른 지역을 선택하면 도시의 데이터가 새로운 데이터로 확장됩니다.

그래서 두 지역 (신구도)의 도시가 있습니다. 그리고 몇 번이나 다른 지역을 고르 느냐에 상관없이 도시 선택에 새로운 데이터를 추가하는 것입니다. 코드에서 모두 괜찮아 보이는 지역 변경에 넣어 .html ('') 그래서 그것은받은 값을 삽입하기 전에 비워야합니다. 그러나 나는 그 버그가 무엇인지 알 수 없다.

Answer 1

$(responce.cities).each(function(){ 
    options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>'; 
}); 

옵션을 추가하는 중이고 삭제하지 않을 수도 있습니다. 로딩하려면 cities을 설정 한 위치 바로 아래에서 옵션을 비 웁니다. 루프 전에 "옵션"VAR을 다시 설정하라는

Answer 2

시도 :

... 
options = ''; 
$(responce.cities).each(function(){ 
... 

Answer 3

는 먼저 변수 옵션을 비우해야합니다. 옵션 변수에 새로운 도시를 추가하는 것뿐입니다.

가장 간단한 솔루션은이 같은 getCities 기능에 변수 옵션을 이동하는 것입니다 :

function getCities (regionId) { 
    var options = ""; 

    city.attr('disabled', true); 
    city.html('<option>Loading...</option>'); 

    $.get(
     '/ajax/get_cities', 
     'region_id='+regionId, 
     function (responce) { 
      if (responce.result === 'success') { 
       $(responce.cities).each(function(){ 
        options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>'; 
       }); 
       city.html(options); 
       city.attr('disabled', false); 
      } 
     }, 'json' 
    ); 
} 

Answer 4

문제는 당신이 데이터를 수신 할 때, 당신은 글로벌 인 options 변수에 추가한다는 것입니다.

options = ''; 

을 그리고 아무런 문제 될 것이 없다 : 그래서, 단지 $(responce.cities).each(function(){하기 전에이 작업을 추가 할 수 있습니다.

참고 : 응답이 아니고 응답이이 아닙니다. :)

Answer 5

getCities 함수에서 첫 번째 행으로 var options='';을 추가하십시오. 당신은 끊임없이 그것에 덧붙이고 있지만 그것을 결코 지우지 않으므로 문제가됩니다.

Answer 6

두 가지 :

1) city.attr('disabled', true);가 city.prop('disabled', 'disabled');이

2)과 같이 그것을 다시 채우기 전에 빈 문자열로 다시 options을 다시 시도해야합니다 :

if (responce.result === 'success') { 
    options = '';       
    $(responce.cities).each(function(){ 
     options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>'; 
    }); 

    city.html(options); 
    city.attr('disabled', false); 
}