获取与首次下拉选择相关的值

Question

<select style="width:300px;" id="FirstDD" name="userListingCategory" onchange="FillSelectTwo(this.options[this.selectedIndex].value)">
                      <option  disabled="disabled">Category...</option>
                      <?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
                      {echo "<option value=". $row['catID'] . ">" .$row['catName']."</option>";}
                    unset($sth2);
            $selectedOptionInCategory = $row['catID'];
                    ?>

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

When a 'category' is selected like:

I want the subcategories associated with that first category chosen to show up.

I'm running the following SQL:

    SELECT scatID, scatName 
FROM Category C, SubCategory SC
WHERE C.catID = SC.catID 
AND C.catID = '$selectedOptionInCategory'

JS:

function FillSelectTwo(id) {  //what is this id for?  
    $.ajax({
        url: 'index.php',
        dataType: 'text',
        success: function(data) {           
         $('#SecDD').find('option').remove().end().append(data);
        },
        error:function(jxhr){
         console.log(jxhr.responseText);        
        }
    });
}

Problem I get When I test this code out, I selected a category like Baby, then the subcategory box clears the first 'disabled' option value, but then its an empty set from there and I can't selected any of the values that the SQL would return upon selecting a category.

What it looks like:

Answer 1

javascript ssems to be fine but i doubt if the ajax call is going out in the first place

see in the firebug or developer tools(for chrome) to confirm that the ajax call is made to index.php

also remove the options in the success callback so if the ajax fails the select remains intact and make an error callback to trace errors

 function FillSelectTwo(id) {  //what is this id for?  
    $.ajax({
        url: 'index.php',
        dataType: 'text',
        success: function(data) {           
         $('#SecDD').find('option').remove().end().append(data);
        },
        error:function(jxhr){
         console.log(jxhr.responseText);        
        }
    });
}

P.S. the is a ' missing at the end of your url may be that is causing the problem