3 drop downs to be populated/filled up depending upon value of previous drop down

3 drop downs to be populated/filled up depending upon value of previous drop down

Dear All

I have 3 drop downs coonected to each other


drop down 1 has values

id=mainid

Male
Female
Children

For Male i have following Categories

id=categoryid

Male Category 1
Male Category 2
Male Category 3

No categories from Female and children

id=subcategoryid

sub category male 1-1
sub category male 1-2
sub category male 1-3

There are no categories under female and children

and no subcategories for 
Male Category 2
Male Category 3

refer link


if we choose male from 1st drop down box
I am getting the values correctly

  however if i click to choose 2nd drop down nothing happens

now kindly refresh the window
and select from 2nd drop down box (donot select anythign from 1st drop down box)

JQuery runs perfectly well
i mean the 3rd dropdown is populated properly.

Please help

JQUERY CODE

  2.   <script type="text/javascript" language="JavaScript1.2"  src="../javascript/jquery.min.js"></script>
  3.  <script type="text/javascript">
  4.  $(document).ready(function(){
  5.   $("#msgbody").hide();
  6.       $('select[name="mainid"]').change(function () {
  7.  $('#categorydiv').empty();
  8.       var sval=$("#mainid").val();         
  9.    var prog="fillcategory.php?id="+sval;
  10.     $('#categorydiv').load(prog);
  11.    $('#subcategorydiv').empty();
  12.         
  13. }); 

  15. });
  16.  $(document).ready(function(){
  17.    
  18. $('select[name="categoryid"]').change(function () {
  19.       var sval=$("#categoryid").val();        
  20.  alert(sval); 
  21.    var prog="fillsubcategory.php?id="+sval;
  22.     $('#subcategorydiv').load(prog);
  23.        
  24. }); 

  26. });
  27. </script>