PHP/Javascript -Selecting a dropdown item should dynamically display another dropdown

I have code for autosuggestion while typing in a text box written in Javascript and PHP. When I start typing a number I get a list of matching numbers and I’m able to select one of them with the mouse click. Now I have an other text box which should display a list of numbers based on the selection from the first textbox. I have no clue on how to do this. It would be great if you provide me with the sample code for the same. Please help me out.

Thanks

Some more information, and possibly some example code might help us be more useful. Based on your description I would probably try using an onChange event from the first input to trigger behavior for the second input.

It looks like what you need to do is to perform a POST operation in your fill function, which will send the selected tech_id to the server, and fetch the available jobs for the given tech_id from the database. It should be fairly similar to the code that you have already performed for autocomplete on the tech_id.

Is there a certain part of the implementation that you need help with?

This is the Html code that I have written and the tech number will be the autosuggest field for which I have used JQUERY…

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Closeout Screen</title>

<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…

Thanks