How to use Ajax to update a second selectbox in jquery using the first selectbox’s value?

2 Views

First off, I’m using wordpress, and the goal is to choose a dropdown selectmenu item, structured in jquery, to choose a parent category. This choice then updates the second select menu with the sub-categories of the parent.

So far, I have this ajax:

Read More
<script>
$(function(){
    $( "#categories" )
      .selectmenu({
        select: function getval() {
        var parent = $("#categories").val();

        $.ajax({
            url: "ajax.php",
            data: { parent : parent },
            type: "POST",
            success: success: function(response){
                $(".sub_cat").html(response);
            },
            error: function() {
                alert("Error, possible missing file.");
            }
            }); //End of ajax
        alert(parent);
        } //End of getval

        }) //End selectMenu
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );

    $( "#sub_cats" )
       .selectmenu()
       .selectmenu( "menuWidget" )
       .addClass( "overflow" );

     var categories = $('#categories');
     var subcats = $('#sub_cats');       
});
</script>

This is the HTML that will be populated: 

<fieldset>
<div class=sub_cat>

</div>
</fieldset>

And This is ajax.php: 

<?php
$parent = $_POST['parent'];
$subcats = get_categories("child_of=$parent");

$parent =   "<label for="sub_cats">Select a Sub-category</label>
            <select name="sub_cats" id="sub_cats">
            <option selected="selected">Pick a Sub-Category</option>" .
            foreach($subcats as $subcat) {
            "<option value=" echo $subcat->name ">" . echo $subcat->name . "</option>"
            } .
            "</select>"
?>

The menus come in as they should, the alerts come in and the parent category is always sent to the ajax when the choice is made. But the success alert is never touched and I have no idea what I’m supposed to put in the ajax.php file. My guess would be to use that file to get the sub-cats in php, and then send it in json format, but I don’t know how.

Absolutely any help is appreciated, I’ve been struggling with this for a while.

I’ve tried the solutions from below but I never get any code or value back from ajax.php with any of their answers. Thats where it stops. I also don’t know how to populate the next selectbox with the new item. Pretend Im a super ignorant programmer who doesn’t know a thing about these structures and explain from that standpoint, that might help I hope.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. In the ajax.php file … do this …

    $parent = $_POST['parent'];

// Query the subcategories using parent ..

// then loop and create select box ...

    Then the change the ajax success like below … and fill the data to subcatogory div

    success: function(response){
    $(".subcat-div").html(response);
}

  2. The simple way is in change event in your #categories
    this must send a request to server and response in html format refreshes #sub_cats

    Let us see:

    //in your js 

$(document).ready(function(){
     $("#categories").change(function(){
        //here we get corrent selected id 
        //form categories in corrent selected option
        var id = $(this).val();

        //simple ajax request $.post
        $.post("ajax.php",{
            id:id           
        },function(data){
            $("#sub_cats").empty()
            $("#sub_cats").append(data)
        },"html")
    });
}

//

    On ajax.php your return must be in Html

    … your query above end fetching result:

    while($sub = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    echo "<option value='".$sub['id']."'>".$sub['name']."</option>";
}

    Check it out.