JQuery의 val()이 공백 뒤에 모든 것을 삭제하지 못하게하려면 어떻게해야합니까?

Question

저는 선택 값을 기반으로하여 주와 도시를 동적으로 가져 오는 무언가를 쓰고 있습니다. 예를 들어 사용자가 "미국"을 국가로 선택한 경우 해당 페이지는 AJAX를 통해 서버에 쿼리를 보내고 States에 "Ohio", "Alabama", "Florida"등으로 채 웁니다. 사용자가 "Florida"를 선택하면 Cities 드롭 다운에 "Orlando", "Miami"등이 표시됩니다.

$().change을 사용하여 변경 사항을 수신합니다. 변화가 감지되면 $().val()으로 선택 필드에서 값을 얻습니다.

 País: <select name="country" id="newCompCountry"></select> 
- Estado: <select name="state" id="newCompState"></select> 
- Ciudad: <select name="city" id="newCompCity"></select><br /> 

옵션 태그

은과 같이 채워집니다 :

$.get("../process/getCountries.php", function(data){ 
     var countries = $("#newCompCountry"); 
     countries.empty(); 
     for(var i = 0; i < data.length; i++) 
     { 
      countries.append("<option value=" + data[i] +">"+ data[i] +"</option>"); 
     } 
    }, "json"); 

    $.get("../process/getStates.php", {country_name : $("#newCompCountry").val()}, function(data){ 
     var states = $("#newCompState"); 
     states.empty(); 
     for(var i = 0; i < data.length; i++) 
     { 
      states.append("<option value=" + data[i] +">"+ data[i] +"</option>"); 
     } 
     console.log("ESTADO: " + $("#newCompState").val()); 
    }, "json"); 

    $.get("../process/getCities.php", {country_name : $("#newCompCountry").val(), state_name : $("#newCompState").val()}, function(data){ 
     var cities = $("#newCompCity"); 
     cities.empty(); 
     for(var i = 0; i < data.length; i++) 
     { 
      cities.append("<option value=" + data[i] +">"+ data[i] +"</option>"); 
     } 
    }, "json"); 

것은, 내가 어떤 분야에서 .val(), 그 .val() 공백이하는 일을 잡아, 모든 것 공간이 감지되면 삭제됩니다.

예를 들어 우리나라를 예로 들자. 나는 "라파즈"도시의 "라파즈"부서에서 "볼리비아"에 살고 있습니다. "라파즈"의 가치를 부여 받으면 그냥 "라"로 나온다.

데이터베이스에는 다른 도시에서 찾을 수있는 공백과 몇 가지 특수 문자가있는 도시 이름이 있으므로 문제가됩니다. 공백이 감지 된 후 jquery가 아무 것도 드롭하지 않도록 강제하는 방법이 있습니까?

는 여기에 내가 (이것은 당신이 위의 코드에서 찾을 수있는 로그입니다) 무슨 뜻인지를 보여주기 위해 스크린 샷 : 당신이 내게 줄 수

어떤 도움이 정말로 이해할 수있을 것이다. 렌더링 된 HTML에서

Answer 1

봐 :

<option value=La Paz>La Paz</option> 

이제 문제를 볼 수 있습니까?

따옴표를 추가하십시오. 또는 vanilla JS을 사용하십시오 :

var states = document.getElementById("newCompState"); 
states.options.length = 0; 
for(var i = 0; i < data.length; i++) { 
    states.appendChild(new Option(data[i]));  
}