Updating list of <select> options using jquery and ajax

ajax, jquery, json, php

Solution

You can use `$.getJSON` if your expecting a json response. You might also be able to use `$.each()` and then simply `.append()` to the `select` tag. You can reference `this.property` inside the `.each()`.

Something like the following:

$.getJSON("updateTypes.php?q="+brandName, function(data) {
    $("#Type").html('');
    $.each(data, function(){
        $("#Type").append('<option value="'+ this.value +'">'+ this.name +'</option>')
    )
})

This would assume your json response is something like the following:

`[ { name : "foo", value : "bar" }, { name : "another", value : "example" } ]`

Problem

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. ``` var brandName = $("#Brand").val(); $.get("updateTypes.php?q="+brandName, function(data) { $("#Type").remove(); var typeData = JSON.parse(data); for (loop=0; loop < typeData.length; ++loop) { $("#Type").options.add(new Option(typeData[loop])); } }); ``` 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: ``` include 'databaseInterface.php'; $brand = $_GET["q"]; $typesData = databaseInterface::getBrandTypes($brand); return $typesData; ``` This calls the getBrandTypes function in my singleton below: ``` $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); ``` 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?

Original source