javascript - 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に何もドロップさせないようにする方法はありますか?

これは、私が何を意味するかを示すスクリーンショットです (これは、上記のコードで見つけることができるログです)。

あなたが私に与えることができるどんな助けも本当に感謝されます.