title: Updating list of <select> options using jquery and ajax
body: <p>I am trying to make an html select list of options update according to a selection made on a prior html select object. My jquery is below. This is being called correctly.</p>
  
  <pre><code>var brandName = $("#Brand").val();
  
  $.get("updateTypes.php?q="+brandName, function(data) {
  
      $("#Type").remove();
      var typeData = JSON.parse(data);
  
      for (loop=0; loop &lt; typeData.length; ++loop) {
          $("#Type").options.add(new Option(typeData[loop]));
      }
  });
  </code></pre>
  
  <p>As I am using a singleton to interface with my mySQL database, this jquery function calls a 'go-between' .php file called updateTypes.php which is below:</p>
  
  <pre><code>include 'databaseInterface.php';
  $brand = $_GET["q"];
  $typesData = databaseInterface::getBrandTypes($brand);
  return $typesData;
  </code></pre>
  
  <p>This calls the getBrandTypes function in my singleton below:</p>
  
  <pre><code>$query = "SELECT psTypeName FROM types WHERE brands_psBrandName='$BrandName'";
  $result = mysqli_query($con, $query) or die ("Couldn't execute query. ".mysqli_error($con));
  $resultArray = array();
  while ($row = mysqli_fetch_assoc($result)) { 
      extract($row);
      $resultArray[] = $psTypeName;   
  }
  
  return json_encode($resultArray);
  </code></pre>
  
  <p>The webpage correctly removes the existing options from the jquery function but fails to update them. It seems to go wrong when I decode the JSON data in the jquery. Why is it going wrong? Is the loop for updating the select object appropriate?</p>