title: php array in to a drop down box via AJAX
body: <p>I have a couple of drop down boxes. I want the first one to select the category, then an AJAX call is done to a PHP file, that selects the appropriate subcategory array and returns it to the second drop down. Code as below:</p>
  
  <p>The PHP file with the subcategories:</p>
  
  <pre><code>    $category = $_POST['category'];
  
  if ($category == "World"){
  $subcategory = array('Europe' =&gt; "Europe", 'North America' =&gt; "North America", 'South America' =&gt; "South America");}
      else if ($category == "Sport"){
  $subcategory = array("Football , Football", "Rugby , Rugby", "Cricket , Cricket"); }
  echo json_encode($subcategory);
  </code></pre>
  
  <p>The AJAX</p>
  
  <pre><code>function getsub(category, subcategory) {
  
  var category = document.getElementById('category').value;
  $('#subcategory').empty();
  $('#subcategory').append("&lt;option&gt;loading...&lt;/option&gt;");
  
  //kicking off AJAX
  $.ajax({
      url: "../php/subcategory.php",
      type: "POST",
      async: true,
      //this is where we define the data that we will send
      data: {
          category: category,
      },
      success: function (subresults) {
          var subresults = JSON.parse(subresults);
          $('#subcategory').empty();
          $('#subcategory').append("&lt;option value='0'&gt;----Select Sub Categry---&lt;/option&gt;");
          $.each(subresults, function (i, item) {
  
              $('#subcategory').append('&lt;option value="' + subresults[i].id + '"&gt;' + subresults[i].name + '&lt;/option&gt;');
  
          });
      },
  });
  return false;
  }
  </code></pre>
  
  <p>The reason I'm doing it this way is because I want to keep the sub-categories on the server side and easy to update without meddling with the code. At the moment, this is outputting the items from the array in to the drop down box, but they are coming through as undefined. Can you help me to output the correct values to the drop down box.</p>