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

Question

我根据选择的值动态编写可以动态获取州和城市的内容。例如，如果用户选择＆＃34;美国＆＃34;作为一个国家/地区，该页面通过AJAX向服务器发送查询，并使用＆＃34;俄亥俄州＆＃34;，＆＃34; Alabama＆＃34;，＆＃34;佛罗里达＆＃34;填充States。等等。当用户选择＆＃34; Florida＆＃34;它将填充{＆＃34;奥兰多＆＃34;，＆＃34;迈阿密＆＃34; 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（）碰巧有空格时，一旦检测到空格就会丢弃所有内容。

以我的国家为例。我住在＆＃34;玻利维亚＆＃34;，在La Paz＆＃34;的部门，在La Paz＆＃34;城市。当我抓住＆＃34; La Paz＆＃34;的价值时，它就出现了＆＃34; La＆＃34;。

这是一个问题，因为数据库包含城市名称，其中包含空格和其他一些特殊字符，您可以在其他特殊城市中找到它们。有没有办法强制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]));    
}