I need help with a dynamic drop down menu. I need when I select a make. the corresponding model load in the second drop down menu

<?php 
$conn=odbc_connect("cisproject","" ,"");// database connection

$make	=	$_POST['manuf_name'];


if ($make){
/////////////////////////////////////////////////
$query		= sprintf("SELECT * FROM Models where manufacture_id='$make'");
$result 	= @mysql_query($query); 
$rowModel 	= mysql_fetch_array($result);
/////////////////////////////////////////////////
}
?>

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="drop.php" >

  <select name="make" onChange="document.forms[0].submit()">
  	<option value="">Select Make</option>
  	<option value="1" <?php if(!(strcmp(1, $make))){echo "selected";}?>>LEXUS</option>
	<option value="2" <?php if(!(strcmp(2, $make))){echo "selected";}?>>TOYOTA</option>
	
  </select>
 

  <select name="model">
    <option value="">Select Model</option>
	<?php do {  ?>
	<option value="<?php echo $rowModel['manufactures_id']; ?>"><?php echo $rowModel['model_name']; ?></option>
    <?php  }while ($rowModel = mysql_fetch_array($result));  ?>
  </select>
  
</form>

</body>
</html>

I wrote this code could someone correct it for me
pls
Thank you

I need help with a dynamic drop down menu. I need when I select a make. the corresponding model load in the second drop down menu

<?php 
$conn=odbc_connect("cisproject","" ,"");// database connection

$make	=	$_POST['manuf_name'];


if ($make){
/////////////////////////////////////////////////
$query		= sprintf("SELECT * FROM Models where manufacture_id='$make'");
$result 	= @mysql_query($query); 
$rowModel 	= mysql_fetch_array($result);
/////////////////////////////////////////////////
}
?>

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="drop.php" >

  <select name="make" onChange="document.forms[0].submit()">
  	<option value="">Select Make</option>
  	<option value="1" <?php if(!(strcmp(1, $make))){echo "selected";}?>>LEXUS</option>
	<option value="2" <?php if(!(strcmp(2, $make))){echo "selected";}?>>TOYOTA</option>
	
  </select>
 

  <select name="model">
    <option value="">Select Model</option>
	<?php do {  ?>
	<option value="<?php echo $rowModel['manufactures_id']; ?>"><?php echo $rowModel['model_name']; ?></option>
    <?php  }while ($rowModel = mysql_fetch_array($result));  ?>
  </select>
  
</form>

</body>
</html>

I wrote this code could someone correct it for me
pls
Thank you

This is more of a JavaScript problem.

What you'll want to do is to write all the models into the second <select> and hide the ones not chosen in the first (or vise versa).

You have to have a way to distinguish each make's model, so give each model a class equal to their make.

Then in the first <select> you want to add an event listener/observer, that will fire when the select choice changes.

<select onchange="myObserver()">

In your observer, you want something like:

<script>

function myObserver() {
var select = this; // your select box
var option = select.options[select.options.selectedIndex]; // the selected option element
var make = option.value; // contains your make
}

</script>

Now your JavaScript function knows which make was chosen, so it can go to the second select box and display only those models of that make.

<script>

function myObserver() {
var select = this; // your select box
var option = select.options[select.options.selectedIndex]; // the selected option element
var make = option.value; // contains your make

var select2 = document.getElementById('models'); // you'll need to give  your <select> an id of models
var options = select2.options;
for (var i = 0; i < options.length; i++) {

if (options[i].className == make) {
options[i].style.display = 'block';
} else {
options[i].style.display = 'none';
}

}

}

</script>

This example makes the options invisible by setting their CSS property, "display" to none. I'm not sure if that will work or not, but that should be a good example. Usually, you want to create and destroy <option> elements, but that is a bit more to code.

i want two drop dawn manu and get data from database , also i select one of option of dropdown list so show another dropdown related options. pleas thanks.

Member Avatar for diafol

You can search this forum or try Google. There are thousands of examples available. Post your code if you have a problem with it and we'll give you a hand. Asking us to do your websearches for you is probably beyond the remit of this site.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.