Question

PHP/MYSQL

<div style="width:810px; margin:inherit; padding-left:170px;">
    <select style="width:300px;" id="n" name="userListingCateory">

        <option  disabled="disabled">Category...</option>
        <?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
        {echo "<option value=". $row['catID'] . ">" .$row['catName']."</option>";}
        unset($sth2);
        ?>
    </select> 
    <select style="width:340px;" id="n" name="userListingSubCateory">
        <option  disabled="disabled">Sub-Category...</option>
        <?php while($row = $sth3->fetch(PDO::FETCH_ASSOC))
        {echo "<option value=". $row['scatID'] . ">" .$row['scatName']."</option>";}
        unset($sth3);
        ?>
    </div>
</select> 

This HTML above gets all categories and sub-categories in two tables [Category] and [SubCategory]

The php/mysql that needs to run upon clicking the [Category] dropdown would look like:

SELECT scatID, scatName 
FROM Category C, SubCategory SC
WHERE C.catID = SC.catID
AND C.catID = $origCatIDSelected;

How do I get this to get the sub-categories based on which category is chosen?

Is there any easy way to implement in jquery/php?

Thanks

Answer 1

You can utilize the change() event handler that executes an AJAX function to pass the current selected category to a PHP file containing the code to query your database and then return the updated output to the client side via the success callback that is built into the AJAX function within jQuery.

Also, you should avoid using the same ID for multiple objects as the ID attribute is meant to be unique.