Dynamic Dependent select box

I'm trying to build a test case of a dynamic dependent select box using mysql/php, ajax, jquery.   Should be streight forward but I having problems.

Here is the test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	  	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   
      	<script type="text/javascript">
           $(document).ready(function(){             
               $("#depth").change(function(){
                     var depth=$("#depth").val();
                     $.ajax({
                        type:"post",
                        url:"support_get.php",
                        data:"depth="+depth,
                        success:function(data){
                              $("#Sup_lft").html(data);
                        }	
                     });		
               });
           });
      </script>
</head>
<body>

Depth :
        <select name="depth" id="depth">    
        <?php
        include "support_db.php";
		
        $result=mysql_query("SELECT Category,Series,Glass_Support,Finish,Key_2 FROM Form_Content WHERE Category='Depth' and Series='CRY140-2'");
		 while($depth=mysql_fetch_array($result)){
        	echo "<option value=$depth[Key_2]>$depth[Finish]</option>";
        } ?>
        </select>
         
 
        Support :
        <select name="Sup_lft" id="Sup_Lft">
            <option>-select Support-</option>
        </select>
        
        
</body>
</html>

**********************  support_get.php  *****************
<?php
  include "support_db.php";
 
 $depth=$_POST["depth"];
  $result=mysql_query("select Display_Name,Key_3 FROM Products where Pri_Group = 'CRY140' AND Sec_Group='Lft' AND Key_2='$depth'");
  while($Sup_lft=mysql_fetch_array($result)){
echo"<option value=$Sup_lft[Key_3]>$Sup_lft[Display_Name]</option>";

  }
?>

Open in new window

The include "support_db.php"  and mysql/php access seems to be working.  I have verified that the mysql data is in place. The first select box is functioning.  The Ajax fetch doesn't populate the second select box.   I hope someone will be able to easily point out what I have wrong.

Thanks
jws2bayAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
$("#Sup_lft").html(data);

should be

$("#Sup_Lft").html(data);

Notice the case
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jws2bayAuthor Commented:
Don't you hate that.   I changed the id to Sup_lft and all is good.

Thanks for giving it a quick look.
0
jws2bayAuthor Commented:
Correct answer and quick
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.