title: How do I prevent JQuery's val() from dropping everything after a whitespace?
body: <p>I'm writing something that fetches states and cities dynamically, based on select values. If, for example,a user chooses "United States" as a country, the page sends a query via AJAX to the server and populates <code>States</code> with "Ohio", "Alabama", "Florida" and so on. When the user chooses "Florida" it will populate the <code>Cities</code> dropdown with "Orlando", "Miami" and so on.</p>
  
  <p>I listen for changes using <code>$().change</code>. When a change is detected, I get the value from the select field with <code>$().val()</code>.</p>
  
  <pre><code>     País: &lt;select name="country" id="newCompCountry"&gt;&lt;/select&gt;
   - Estado: &lt;select name="state" id="newCompState"&gt;&lt;/select&gt;
   - Ciudad: &lt;select name="city" id="newCompCity"&gt;&lt;/select&gt;&lt;br /&gt;
  </code></pre>
  
  <p>The option tags are populated like so:</p>
  
  <pre><code>$.get("../process/getCountries.php",  function(data){
          var countries = $("#newCompCountry");
          countries.empty();
          for(var i = 0; i &lt; data.length; i++)
          {
              countries.append("&lt;option value=" + data[i] +"&gt;"+ data[i] +"&lt;/option&gt;");
          }
      }, "json");
  
      $.get("../process/getStates.php", {country_name : $("#newCompCountry").val()}, function(data){
          var states = $("#newCompState");
          states.empty();
          for(var i = 0; i &lt; data.length; i++)
          {
              states.append("&lt;option value=" + data[i] +"&gt;"+ data[i] +"&lt;/option&gt;");
          }
          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 &lt; data.length; i++)
          {
              cities.append("&lt;option value=" + data[i] +"&gt;"+ data[i] +"&lt;/option&gt;");
          }
      }, "json");
  </code></pre>
  
  <p>The thing is, when I grab the .val() from any field, and that .val() happens to have spaces, everything is dropped when the space is detected.</p>
  
  <p>Take for example my country. I live in "Bolivia", in the department of "La Paz", in the city of "La Paz". When I grab the value of "La Paz", it just comes out as "La".</p>
  
  <p>This is a problem, because the database holds city names with spaces and a few other special characters you may find in other peculiar cities. Is there a way to force jquery to not drop anything after a whitespace is detected?</p>
  
  <p>Here's a screenshot to show you what I mean (this is the log you can find in the code above):</p>
  
  <p><img src="https://i.stack.imgur.com/ofL25.png" alt="&quot;La&quot;"></p>
  
  <p>Any help you can give me will be really appreciated.</p>