Cascading Drop Down Lists using JQuery

Question

I am trying to populate drop down lists one after the other. These drop down lists contain categories and subcategories. I would like to continue creating drop down lists until there are not more subcategories for a particular category. I am populating my drop down lists with results from MySQL.

I have searched all over and could not find any references to cascading drop down lists using more than two lists.

My code works for two lists, but not for more.

partRequest.php

<HTML>
<HEAD>
<script type="text/javascript" src="..\jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#1").change(function(e) {
        e.preventDefault();
        getNextCategory("1");
    });

    $("#2").change(function(e) {
        e.preventDefault();
        getNextCategory("2");
    });

    $("#3").change(function(e) {
        e.preventDefault();
        getNextCategory("3");
    });
});

function getNextCategory(htmlID) {
    var categoryID = ""
    var newHTMLID = 0
    var newCategory = ""
    categoryID = $("#" + htmlID ).val();
    newHTMLID = Number(htmlID) + Number(1)
    newCategory = "category" + newHTMLID
    $.ajax({
        type: "POST",
        url: "findNextCategory.php",
        data: "ID=" + categoryID + "&Number=" + newHTMLID,
        success: function(output){
            $("#" + newCategory).html(output);
        }
    });
}

</script>

</HEAD>
<BODY>

<form name="partSubmissionForm" id="partSubmissionForm" action="" method="POST">

    <table width=147 cellpadding=0 cellspacing=0>
        <tr><td><select id="1">
            <?PHP 
            $query = "SELECT Name, ID FROM categories WHERE ParentID = 0";
            $result = mysql_query($query);
            while ($row=mysql_fetch_array($result)){
            ?>
            <option value="<? echo $row['ID'];?>"> <? echo $row['Name'];?></option>
                <?}?>
            </select>
        </td>
        <td>
            <div id="category2">
                test2
            </div>
        </td>
        <td>
            <div id="category3">
                test3
            </div>
        </td>
        </tr>        
        <tr><td><input type="submit" name="submit" id="submit" value="GO"></td></tr>
        </table>
</form>


</BODY>

</HTML>

findNextCategory.php

<?PHP
define('INCLUDE_CHECK',true);
include ('..\db.php');

$categoryID = $_POST['ID'];
$categoryFieldNum = $_POST['Number'];
echo $categoryID;
echo $categoryFieldNum;
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
echo $query;
echo "<select id=$categoryFieldNum>";
    $query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
    $result = mysql_query($query);
    while ($row=mysql_fetch_array($result)){
        $optionValue = $row['ID'];
        $optionText = $row['Name'];
        echo "<option value='$optionValue'> $optionText </option>";
    }
echo "</select>";
?>

Dustin Wilhelmi Dustin Wilhelmi · Accepted Answer · 2012-06-26T15:14:06

The problem is that your click function definitions only apply to items that are already on the page at page load. Because you do not yet have a select object on the page with an id of "2", your $("#2").change function does not ever get attached.

What you need to do to get around this is to apply that click definition after you add the select to the page. Try changing your success function to this:

success: function(output){
    $("#" + newCategory).html(output);
    $("#" + newHTMLID).change(function(e) {
        e.preventDefault();
        getNextCategory(newHTMLID);
    });
}

Cascading Drop Down Lists using JQuery

1 Answers