CODEWITHSUNDEEP
javascriptphparraysajax
Joe
Joe

Reputation: 31

php array in to a drop down box via AJAX

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:

The PHP file with the subcategories:

    $category = $_POST['category'];

if ($category == "World"){
$subcategory = array('Europe' => "Europe", 'North America' => "North America", 'South America' => "South America");}
    else if ($category == "Sport"){
$subcategory = array("Football , Football", "Rugby , Rugby", "Cricket , Cricket"); }
echo json_encode($subcategory);

The AJAX

function getsub(category, subcategory) {

var category = document.getElementById('category').value;
$('#subcategory').empty();
$('#subcategory').append("<option>loading...</option>");

//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("<option value='0'>----Select Sub Categry---</option>");
        $.each(subresults, function (i, item) {

            $('#subcategory').append('<option value="' + subresults[i].id + '">' + subresults[i].name + '</option>');

        });
    },
});
return false;
}

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.

Upvotes: 0

Views: 681

Answers (2)

Mouradif
Mouradif

Reputation: 2694

In your AJAX you call for subresults[i].id and subresults[i].name so you have to use this structure when defining your PHP Arrays :

if ($category == "World"){
    $subcategory = array(
        array('id' => "Europe", 'name' => "Europe"),
        array('id' => "North America", 'name' => "North America"),
        array('id' => "South America", 'name' => "South America")
    );}
else if ($category == "Sport"){
    $subcategory = array(
        array('id' => "Football", 'name' => "Football"),
        array('id' => "Rugby", 'name' => "Rugby"),
        array('id' => "Cricket", 'name' => "Cricket")
    ); }
echo json_encode($subcategory);

Upvotes: 0

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

Reputation: 4216

One thing is that, if you have value and label of the option to be same, you don't need to set the array with 'Europe' => "Europe" with unnecessary key. Just set the array like this 

$subcategory = array("Europe", "North America", "South America");

And in your JS, set the value and label like this: 

$.each(subresults, function (i, item) {
     $('#subcategory').append('<option value="' + item + '">' + item + '</option>');
});

But, if you want to keep separate value and label like this: 

$subcategory = array('EU' => "Europe", 'NA' => "North America", 'SA' => "South America");

Then set the option value and label like this:

$.each(subresults, function (i, item) {
     $('#subcategory').append('<option value="' + i + '">' + item + '</option>');
});

Using of subresults[i] is unnecessary, because you already have the value as item, which is equivalent to subresults[i].

Upvotes: 1

Related Questions