Dynamic Drop down menu

Question

starter 0 Newbie Poster

15 Years Ago

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

php

4 Contributors
3 Replies
208 Views
4 Years Discussion Span
Latest Post 11 Years Ago Latest Post by diafol

All 3 Replies

digital-ether 399 Nearly a Posting Virtuoso

15 Years Ago

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.

Reply to this topic

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.

kashif.hussain 0 Newbie Poster · Answer 1 · 2012-12-13T12:14:02+00:00

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.

diafol · Answer 2 · 2012-12-13T17:58:08+00:00

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.

Dynamic Drop down menu

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers