title: Load MySQL data without Refresh Webpage
body: <p>I try to populate a select box based on the value of the another, by getting JSON data with jQuery from a PHP script that gets the data from a MySQL database.
  This is my table :
  <a href="https://i.stack.imgur.com/goC0K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/goC0K.jpg" alt="enter image description here"></a></p>
  
  <p>I hope, if i select a different fruit from the first selection, it will change the available varieties in the second select.</p>
  
  <p>According to my script, i'm not able to get corresponding available varieties into the second select, what wrong on my script. </p>
  
  <pre><code>&lt;form&gt;
  Fruit:
  &lt;select name="name" id="fruitName"&gt;
      &lt;option&gt;Apple&lt;/option&gt;
      &lt;option&gt;Banana&lt;/option&gt;
      &lt;option&gt;Orange&lt;/option&gt;
      &lt;option&gt;Pear&lt;/option&gt;
  &lt;/select&gt;
  Variety:
  &lt;select name="variety" id="fruitVariety"&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  function populate() {
      $.getJSON('varities.php', {fruitName:$('#fruitName').val()}, function(data) {
      var select = $('#fruitVariety');
      var options = select.attr('options');
      $('option', select).remove();
      $.each(data, function(index, array) {
          options[options.length] = new Option(array['variety']);
      });
  });
  }
  
  $(document).ready(function() {
  populate();
  $('#fruitName').change(function() {
      populate();
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is my varities.php script</p>
  
  <pre><code>$result = array();
  $fruitName = $_GET['fruitName'];
  $res=mysql_query("SELECT variety FROM fruit WHERE name = '$fruitName' ORDER BY variety");
  while ($row=mysql_fetch_array($res)){ 
      array_push($result, array('variety'=&gt;$row['variety']));
  }
  echo json_encode(array('result'=&gt;$result));
  </code></pre>
  
  <p>Please any suggestions?</p>