Javascript/Jquery Selecting a value from a dropdown should enable value for the other dropdown based on selection

Javascript/Jquery Selecting a value from a dropdown should enable value for the other dropdown based on selection

Any idea on how to get this done...
I have two text fields one is TECH field and another is JOB NUMBER... If I type a number in the tech field and If I select a number from the autopopulated/autosuggested list of tech number(which is queried from the database) it should display a dropdown list of JOBNUMBERS associated to that particular TECH number.....

This is the code that I have  to fetch the and the tech number will be the autosuggest field for which I have used JQUERY.....


<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#tech').addClass('load');
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#tech').removeClass('load');
}
});
}
}

function fill(thisValue) {
$('#tech').val(thisValue);
//$('#suggestions').hide();
setTimeout("$('#suggestions').fadeOut();");
}

</script>

<style>
........
........
</style>
</head>

<body>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">

<table width="300" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="suggest" align="left">Tech ID:
<input type="text" size="4" name="tech" id="tech" value="" maxlength="4" onkeyup="suggest(this.value)" onblur="fill()" onchange="jobDropDown(this)" class="" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="suggestionsList"> </div>
</div>
</div></td>
<td>Job Number: <input type="text" name="Job" id="Job" maxlength="6" value=""/></td>
<td><input type="submit" name="search" id="search" value="Search"/></td>
</tr>
</table>
</form>
</body>
</html>


The database connection code :

<?php
$db = new mysqli('localhost', 'root' ,'', 'Technician');

if(!$db) {

echo 'Could not connect to the database.';
} else {

if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);

if(strlen($queryString) >0) {

$query = $db->query("SELECT Tech_ID FROM tech WHERE Tech_ID LIKE '$queryString%' LIMIT 10");
if($query) {
echo '<ul>';
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.addslashes($result->Tech_ID).'\');">'.$result->Internal_Tech_ID.'</li>';
}
echo '</ul>';

} else {
echo 'OOPS we had a problem ';
}
} else {
// do nothing
}
} else {
echo 'There should be no direct access to this script!';
}
}
?>

The above code will fetch you the result from database for the tech number and now need to get the JOB number dropdw to be populated based on the selection from tech field....


Please help me out..... If somebody has better code or another code please post it here.....

Thanks