title: Set Select Option Using Jquery
body: <p>I have three select boxes of Country, State, City</p>
  
  <pre><code>&lt;select name="property_country" id="country" &gt; 
    &lt;option value=""&gt;Country&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="property_state" id="state" &gt; 
    &lt;option value=""&gt;State&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="property_city" id="city"&gt; 
    &lt;option value=""&gt;City&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>PHP is filling the country, Ajax is filling the State and City fields, no problems there. I have two countries in the database - India and USA.</p>
  
  <p>If I select India, ajax gives the state correctly. But if I reselect option label "Country" then state and city fields go blank. I need jQuery code to fill the default labels and values as given above "State" and "City" if no country is selected (meaning "Country") is selected.</p>
  
  <p>This can be done via database by filling in State and City entries and attaching them to Country and then onload (body or javascript) upload the default values.  But that will make the validation work also patchwork and not a logical flow.  Hence the requirement of jQuery solution.</p>
  
  <p>My jQuery Code is below:</p>
  
  <pre><code>$(document).ready(function() {
    $('#country').on('change', function() {
      var country_id = $('#country').val();
      $.ajax({
        type: 'POST',
        url: '../controllers/select.php',
        data: "country_id=" + country_id,
        success: function(msg) {
          $("#state").html(msg);
        }
      });
    });
  
    $('#state').on('change', function() {
      var state_id = $('#state').val();
      $.ajax({
        type: 'POST',
        url: '../controllers/select.php',
        data: "state_id=" + state_id,
        success: function(msg) {
  
          $("#city").html(msg);
        }
      });
    });
  </code></pre>
  
  <p>I tried</p>
  
  <pre><code>if (country_id == "") {
      $("#state").val("State");               
  } else {    
      $.ajax({});
  }
  </code></pre>