根据第一个下拉菜单选择填充第二个下拉菜单

Question

Basically, what I'm trying to accomplish is when someone clicks the first html dropdown id="FirstDD" , based on the option chosen the second dropdown id="SecDD" would populate with the fields that correlate to FirstDD dropdowns choice. Triggering this all is ajax to do the initial call and php to handle from there in subcategories.php .

Currently, what is happening is: i selected the first dropdown, but nothing gets populated in SecDD

JS/AJAX:

    <script type="text/javascript">
    $(document).ready(function(){
    $("#FirstDD").change(function(){
        $('#SecDD').load('inc/subcategories.php?scatID='+this.value);
        });
    });
    </script>

HTML

   <select style="width:300px;" id="FirstDD" name="userListingCategory">
                    <!--onchange="$('#SecDD').load('inc/subcategories.php?scatID='+this.value);"-->
                          <option  disabled="disabled">Category...</option>
                          <?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
                          {echo "<option value=". $categoryID . ">" .$row['catName']."</option>";}
                        unset($sth2);
                        ?>

                    </select> 
                   <select style="width:340px;" id="SecDD" name="userListingSCategory" style="display:none">
                    <?php require_once('inc/subcategories.php'); ?>
                    </div>
                    </select> 

Subcategories.php

<?php require_once('db/dbc.php');
#GET SELECT sub-category names
$pdo3 = new PDO($h1, $u, $p);
$pdo3->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth3 = $pdo3->prepare("
SELECT scatID, scatName
FROM Category C, SubCategory SC
WHERE C.catID = SC.catID
;");
$sth3->execute(array());
?>

<option  disabled="disabled">Sub-Category...</option>
<?php
#Get subcats    
while($row = $sth3->fetch(PDO::FETCH_ASSOC))
{echo "<option value=". $row['scatID'] . ">" .$row['scatName']."</option>";}
unset($sth3);
?>

Answer 1

Diagnose the issue:

• Get the php to echo this.value to see if the contents of that are what you're expecting.
• Run the SQL query with the contents you're expecting and see if it returns the data you're expecting.

If both of those work fine each time, then something's not triggering, but the code seems sound from here. After that, I would try putting echo statements in between your lines and see where it stops.