如何防止JQuery的val()在空格后丢弃所有内容？

Question

我正在写一些基于选择值动态获取州和城市的东西.例如,如果用户选择"美国"作为国家,则页面通过AJAX向服务器发送查询并填充States"俄亥俄州","阿拉巴马州","佛罗里达州"等.当用户选择"佛罗里达"时,它将Cities使用"奥兰多","迈阿密"等填充下拉列表.

我用它来听取变化$().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()碰巧有空格时,一切都会在检测到空格时被删除.

以我的国家为例.我住在"玻利维亚",在"拉巴斯"部门,在"拉巴斯"市.当我抓住"La Paz"的价值时,它就像"La"一样.

这是一个问题,因为数据库包含城市名称,其中包含空格和其他一些特殊字符,您可以在其他特殊城市找到这些字符.有没有办法强制jquery在检测到空格后不丢弃任何内容？

这是一个屏幕截图,向您展示我的意思(这是您可以在上面的代码中找到的日志):

你能给我的任何帮助都将非常感激.

Answer 1

查看呈现的HTML:

<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]));    
}