title: select option generate value from ajax on change
body: <p>I have <a href="https://stackoverflow.com/questions/27981674/set-the-option-available-for-select-based-on-another-select-php">here</a> the code and flow of my project i have 3 select here one for continent one for country one for city i get data to populate these select from ajax request it is now working fine i just want to make a bit fancy so i want to have a few function</p>
  
  <p>1.When Continent is select the list of country for that continent is listed in the country list when the change happens I want the city
      to also show the cities of the first entry in the country currently
      it does not happened what i do is i still need to change the entry
      in country select to show the list of cities </p>
  
  <p>2.Question is do i need to add another ajax request inside the ajax request for continent i am not sure this one is feasible i tried it,
  it is not working for now</p>
  
  <p>Ajax Code</p>
  
  <pre><code>$('.continentname').change(function() {
          var id = $(this).find(':selected')[0].id;
          //alert(id); 
          $.ajax({
              type:'POST',
              url:'../include/continent.php',
              data:{'id':id},
              success:function(data){
                  // the next thing you want to do 
      var country= document.getElementById('country');
                $(country).empty();
      var city = document.getElementById('city');
                $(city).empty();
      for (var i = 0; i &lt; data.length; i++) {
      $(country).append('&lt;option id=' + data[i].sysid + ' value=' + data[i].name + '&gt;' + data[i].name + '&lt;/option&gt;');
      }
              }
          });
  
      });
  
  $('.countryname').change(function() {
          var id = $(this).find(':selected')[0].id;
          $.ajax({
              type:'POST',
              url:'../include/country.php',
              data:{'id':id},
              success:function(data){
                  // the next thing you want to do 
      var city = document.getElementById('city');
                $(city).empty();
      for (var i = 0; i &lt; data.length; i++) {
      $(city).append('&lt;option id=' + data[i].sysid + ' value=' + data[i].name + '&gt;' + data[i].name + '&lt;/option&gt;');
      }
              }
          });
  
      });
  </code></pre>
  
  <p>From database i put the value into the option select like </p>
  
  <pre><code>$("#continent").val(continentid);
  $("#continent").change();
  $("#country").change();
  $("#country").val(countryid);
  $("#city").val(cityid);
  </code></pre>