Hi Everyone

Could someone assist me in a PHP / MySQL dropdown select menu. I want to pull info from my DB and display it, then when I select the option it need's to reload screen and add a second drop down select menu. When I select the 2nd one it should also reload the screen and add a third and final select drop down menu.

Hope someone could assist me in this.

Regards

Recommended Answers

All 22 Replies

Hi Everyone

Could someone assist me in a PHP / MySQL dropdown select menu. I want to pull info from my DB and display it, then when I select the option it need's to reload screen and add a second drop down select menu. When I select the 2nd one it should also reload the screen and add a third and final select drop down menu.

Hope someone could assist me in this.

Regards

Hello,

You must be use AJAX base selection box for that..:-)

Hello,

You must be use AJAX base selection box for that..:-)

Hi There.

I know I'm not allowed to ask this question, but I'm going to try. You can't assist me with code for this. I'm not good at all with Ajax.

Regards

I'll build a code for you
can you tell me how you need this to display?
I.E:
if you want one drop box to change from another (AJAX),
or just display one drop box from the database (while query)

I'll build a code for you
can you tell me how you need this to display?
I.E:
if you want one drop box to change from another (AJAX),
or just display one drop box from the database (while query)

Hi Metalix.

Thanks allot for assisting me in this. Here is a dump of my DB that I want to use .

I need the 1st field to pull data from the make field. Then it needs to populate the second drop down menu with the mead_model data. The 3de and final drop down menu need's to display the field deriv data.

Thanks a million.

Regards

+------------------+
| Field            |
+------------------+
| mead_id          |
| MEAD_CODE        |
| VEHICLE_TYPE     |
|[B] MAKE [/B]            |
| [B]DERIV  [/B]          |
| CYL              |
| CC               |
| KW               |
| TYPE             |
| DOORS            |
| INTRO_DATE       |
| DATE_TIME_STAMP  |
| MODEL            |
| [B]MEAD_MODEL [/B]      |
| MEAD_VARIANT     |
| TYPE_OF_VEHICLE  |
| MASS             |
| DISK_DRV_VEH_IMG |
+------------------+

Hey I just quickly whipped this up
I haven't done any error checking yet
you will need to change all the bits to your site stuff (Obviously)

Main code

<? //firstly connect to your database
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_login = "localhost";
$database_login = "db";
$username_login = "user";
$password_login = "pass";
$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

?>
then put this in your <head>
<script type="text/javascript">
 
var arrayData = new Array(); 
 <?php
 mysql_select_db($database, $conn);
$query_table2 = "SELECT * FROM table";
$table2 = mysql_query($query, $conn) or die(mysql_error());
$row_table2 = mysql_fetch_assoc($table2);
$totalRows_table2 = mysql_num_rows($table2);
$a=1;
echo "arrayData[0]	= 'Select a make|Select a model|'\n";
mysql_select_db($database_product, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
$model = $row['MEAD_MODEL'];
echo "arrayData[$a]	= '$make|$model|'\n";
$a++;
}
/*
+------------------+
| Field            |
+------------------+
| MAKE             |
| DERIV            |
| MEAD_MODEL       |
+------------------+
*/
 ?>
function populateData( name ) { 
	select	= window.document.mysql.product; 
	string	= ""; 
		// 0 - will display the new options only 
		// 1 - will display the first existing option plus the new options 
	count	= 0; 
		// Clear the old list (above element 0) 
	select.options.length = count; 
		// Place all matching categories into Options. 
	for( i = 0; i < arrayData.length; i++ ) { 
		string = arrayData[i].split( "|" ); 
		if( string[0] == name ) { 
			select.options[count++] = new Option( string[1] ); 
		} 
	} 
		// Set which option from subcategory is to be selected 
//	select.options.selectedIndex = 2; 
		// Give subcategory focus and select it 
//	select.focus(); 
}  
function showData(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("data").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdata.php?q="+str,true);
xmlhttp.send();
}
</script>
then the form in the <body>
  <form id="mysql2" name="mysql" method="post" action="" >
    <p>Category <br />
      <select name="category" id="category" onchange="javascript:populateData( this.options[selectedIndex].text )">
      <option value="" selected="selected">Please select a make</option>
        <?PHP
echo '<option value="">Select a make</option>';
mysql_select_db($database, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
echo '<option value="'.$row['MAKE'].'">'.$row['MAKE'].'</option>';
$a++;
}
	?>
      </select>
    </p>
    <span class=DefMenuText>Select a model</span><br />
    <select id="product" name="product" size=1 style="width:120;" onChange="showData(this.value)">
      <option>Select a Product</option>
    </select>
    </p>
    the AJAX request here
    <div id="data"></div>
  </form>

And the getdata.php file just gets the info for this and displays it as plain html
where q = the model

<?
//connect to database
mysql_select_db($database, $conn);
$query_Recordset31 = "SELECT * FROM table WHERE model = '$q'";
$Recordset31 = mysql_query($query_Recordset31, $conn) or die(mysql_error());
while($row = mysql_fetch_array($Recordset31)){
		echo $row['DERIV']';
}
?>

Hope this helps
If you can't get it working I'll fix it up when I have more time.
I'll prob put some tutorials like this with downloaded files ect on my site eventually.

Hey I just quickly whipped this up
I haven't done any error checking yet
you will need to change all the bits to your site stuff (Obviously)

Main code

<? //firstly connect to your database
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_login = "localhost";
$database_login = "db";
$username_login = "user";
$password_login = "pass";
$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

?>
then put this in your <head>
<script type="text/javascript">
 
var arrayData = new Array(); 
 <?php
 mysql_select_db($database, $conn);
$query_table2 = "SELECT * FROM table";
$table2 = mysql_query($query, $conn) or die(mysql_error());
$row_table2 = mysql_fetch_assoc($table2);
$totalRows_table2 = mysql_num_rows($table2);
$a=1;
echo "arrayData[0]	= 'Select a make|Select a model|'\n";
mysql_select_db($database_product, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
$model = $row['MEAD_MODEL'];
echo "arrayData[$a]	= '$make|$model|'\n";
$a++;
}
/*
+------------------+
| Field            |
+------------------+
| MAKE             |
| DERIV            |
| MEAD_MODEL       |
+------------------+
*/
 ?>
function populateData( name ) { 
	select	= window.document.mysql.product; 
	string	= ""; 
		// 0 - will display the new options only 
		// 1 - will display the first existing option plus the new options 
	count	= 0; 
		// Clear the old list (above element 0) 
	select.options.length = count; 
		// Place all matching categories into Options. 
	for( i = 0; i < arrayData.length; i++ ) { 
		string = arrayData[i].split( "|" ); 
		if( string[0] == name ) { 
			select.options[count++] = new Option( string[1] ); 
		} 
	} 
		// Set which option from subcategory is to be selected 
//	select.options.selectedIndex = 2; 
		// Give subcategory focus and select it 
//	select.focus(); 
}  
function showData(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("data").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdata.php?q="+str,true);
xmlhttp.send();
}
</script>
then the form in the <body>
  <form id="mysql2" name="mysql" method="post" action="" >
    <p>Category <br />
      <select name="category" id="category" onchange="javascript:populateData( this.options[selectedIndex].text )">
      <option value="" selected="selected">Please select a make</option>
        <?PHP
echo '<option value="">Select a make</option>';
mysql_select_db($database, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
echo '<option value="'.$row['MAKE'].'">'.$row['MAKE'].'</option>';
$a++;
}
	?>
      </select>
    </p>
    <span class=DefMenuText>Select a model</span><br />
    <select id="product" name="product" size=1 style="width:120;" onChange="showData(this.value)">
      <option>Select a Product</option>
    </select>
    </p>
    the AJAX request here
    <div id="data"></div>
  </form>

And the getdata.php file just gets the info for this and displays it as plain html
where q = the model

<?
//connect to database
mysql_select_db($database, $conn);
$query_Recordset31 = "SELECT * FROM table WHERE model = '$q'";
$Recordset31 = mysql_query($query_Recordset31, $conn) or die(mysql_error());
while($row = mysql_fetch_array($Recordset31)){
		echo $row['DERIV']';
}
?>

Hope this helps
If you can't get it working I'll fix it up when I have more time.
I'll prob put some tutorials like this with downloaded files ect on my site eventually.

Hi Metalix.

Got it display only the first dropdown with correct data but nothing else.

Regards

Hey yeah sorry I put some wrong variables in it

try this

<? //firstly connect to your database
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname = "localhost";
$database = "db";
$username = "user";
$password = "pass";
$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

?>
then put this in your <head>
<script type="text/javascript">
 
var arrayData = new Array(); 
 <?php
 mysql_select_db($database, $conn);
$query_table = "SELECT * FROM table";
$table = mysql_query($query, $conn) or die(mysql_error());
$row_tabl2 = mysql_fetch_assoc($table);
$totalRows_table = mysql_num_rows($table);
$a=1;
echo "arrayData[0]	= 'Select a make|Select a model|'\n";
mysql_select_db($database, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
$model = $row['MEAD_MODEL'];
echo "arrayData[$a]	= '$make|$model|'\n";
$a++;
}
/*
+------------------+
| Field            |
+------------------+
| MAKE             |
| DERIV            |
| MEAD_MODEL       |
+------------------+
*/
 ?>
function populateData( name ) { 
	select	= window.document.mysql.product; 
	string	= ""; 
		// 0 - will display the new options only 
		// 1 - will display the first existing option plus the new options 
	count	= 0; 
		// Clear the old list (above element 0) 
	select.options.length = count; 
		// Place all matching categories into Options. 
	for( i = 0; i < arrayData.length; i++ ) { 
		string = arrayData[i].split( "|" ); 
		if( string[0] == name ) { 
			select.options[count++] = new Option( string[1] ); 
		} 
	} 
		// Set which option from subcategory is to be selected 
//	select.options.selectedIndex = 2; 
		// Give subcategory focus and select it 
//	select.focus(); 
}  
function showData(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("data").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdata.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
then the form in the <body>
  <form id="mysql2" name="mysql" method="post" action="" >
    <p>Category <br />
      <select name="category" id="category" onChange="javascript:populateData( this.options[selectedIndex].text )">
      <option value="" selected="selected">Please select a make</option>
        <?PHP
echo '<option value="">Select a make</option>';
mysql_select_db($database, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
echo '<option value="'.$row['MAKE'].'">'.$row['MAKE'].'</option>';
$a++;
}
	?>
      </select>
    </p>
    <span class=DefMenuText>Select a model</span><br />
    <select id="product" name="product" size=1 style="width:120;" onChange="showData(this.value)">
      <option>Select a Product</option>
    </select>
    </p>
    the AJAX request here
    <div id="data"></div>
  </form>
</body>

This might work a little better

Hey yeah sorry I put some wrong variables in it

try this

<? //firstly connect to your database
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname = "localhost";
$database = "db";
$username = "user";
$password = "pass";
$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

?>
then put this in your <head>
<script type="text/javascript">
 
var arrayData = new Array(); 
 <?php
 mysql_select_db($database, $conn);
$query_table = "SELECT * FROM table";
$table = mysql_query($query, $conn) or die(mysql_error());
$row_tabl2 = mysql_fetch_assoc($table);
$totalRows_table = mysql_num_rows($table);
$a=1;
echo "arrayData[0]	= 'Select a make|Select a model|'\n";
mysql_select_db($database, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
$model = $row['MEAD_MODEL'];
echo "arrayData[$a]	= '$make|$model|'\n";
$a++;
}
/*
+------------------+
| Field            |
+------------------+
| MAKE             |
| DERIV            |
| MEAD_MODEL       |
+------------------+
*/
 ?>
function populateData( name ) { 
	select	= window.document.mysql.product; 
	string	= ""; 
		// 0 - will display the new options only 
		// 1 - will display the first existing option plus the new options 
	count	= 0; 
		// Clear the old list (above element 0) 
	select.options.length = count; 
		// Place all matching categories into Options. 
	for( i = 0; i < arrayData.length; i++ ) { 
		string = arrayData[i].split( "|" ); 
		if( string[0] == name ) { 
			select.options[count++] = new Option( string[1] ); 
		} 
	} 
		// Set which option from subcategory is to be selected 
//	select.options.selectedIndex = 2; 
		// Give subcategory focus and select it 
//	select.focus(); 
}  
function showData(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("data").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdata.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
then the form in the <body>
  <form id="mysql2" name="mysql" method="post" action="" >
    <p>Category <br />
      <select name="category" id="category" onChange="javascript:populateData( this.options[selectedIndex].text )">
      <option value="" selected="selected">Please select a make</option>
        <?PHP
echo '<option value="">Select a make</option>';
mysql_select_db($database, $conn);
$result = mysql_query("SELECT * FROM table");

while($row = mysql_fetch_array($result))
{		
$make = $row['MAKE'];
echo '<option value="'.$row['MAKE'].'">'.$row['MAKE'].'</option>';
$a++;
}
	?>
      </select>
    </p>
    <span class=DefMenuText>Select a model</span><br />
    <select id="product" name="product" size=1 style="width:120;" onChange="showData(this.value)">
      <option>Select a Product</option>
    </select>
    </p>
    the AJAX request here
    <div id="data"></div>
  </form>
</body>

This might work a little better

Hi There.

Nope still only getting 1st dropdown.

Thanks for all your help so far.

Regards

look in your source code for the lines that look like:

arrayData[1] = 'toyota|corrolla|'
arrayData[2] = 'toyota|altezza|'
arrayData[3] = 'mazda|familia|'
arrayData[4] = 'mazda|altenza|'
arrayData[5] = 'ford|falcon|'

if these don't appear there is a problem with the while query at line 27
no problems

look in your source code for the lines that look like:

arrayData[1] = 'toyota|corrolla|'
arrayData[2] = 'toyota|altezza|'
arrayData[3] = 'mazda|familia|'
arrayData[4] = 'mazda|altenza|'
arrayData[5] = 'ford|falcon|'

if these don't appear there is a problem with the while query at line 27
no problems

Hi There.

Yip. I'm getting those values now. But I'm still not able to get the DERIV data. Sorry for bugging you so much.

Thanks for all your help.

Regards

No worries.
I got that error alot when I first used this system.
You need to open the getdata.php file in your browser with a value.
e.g: getdata.php?var=value
test a couple of values the ajax requet might be calling (the second select menu)
and see if it displays the correct data.
for example your source code should show

<p>your data here<br />
more data</p>

hope this helps :)

you must use ajax for this, for a good example try checking the w3school website for this

Yes this already has AJAX, this just means the XMLhttprequest on line 100 or something.
I have read through the code a few times and can't see any errors. although I could have missed something.
This means the error must be on the getdata.php usually it is not connecting to the server. it will probably show a mysql error.
If it shows correctly when you type something like getdata.php?model=corrolla or something. then the error is on the main file, check the httprequest and the div "product" to see it is all linking correctly.

Good Luck :)

hi every one
i am developing web site of online quiz by using html/php/mysql/css/java script.
can you help me to show the demo/documentation of that type of project

I recommend you start a new thread for this.
Visit w3schools.com and view ajax to connect to a database while user is still on the page.
for the select part where one changes value from another I will probably make a tutorial when I have time, as I can't remember where I learnt how to do it

I recommend you start a new thread for this.
Visit w3schools.com and view ajax to connect to a database while user is still on the page.
for the select part where one changes value from another I will probably make a tutorial when I have time, as I can't remember where I learnt how to do it

Hi There.

I would like to thank everyone for helping me out with this issue. I got it sorted. I'm using pure PHP / MySQL code that I wipped up. Will post it tomorrow.

Once again Thanks allot to everyone.

Regards

Hi There.

I would like to thank everyone for helping me out with this issue. I got it sorted. I'm using pure PHP / MySQL code that I wipped up. Will post it tomorrow.

Once again Thanks allot to everyone.

Regards

Hi Everyone.

The Code to follow. Please let me know if there is anything that can be done to improve this code. Hope this helps anyone else with multiple dropdown menu requirements. The Whole structure can increased or decreased.

Thanks again for all the guidance.

Regards

<?php
require_once 'include/config.php';
require_once 'include/opendb.php';
?>
<?php
if(isset($_POST['model'])){ //This is for the third and final drop down menu. It allows you to submit and go to new page.
	$link="index.php";
}else{ //This is for the third and final drop down menu. It allows you to submit and go to new page.
	$link="#"; 
}
?>
<form method="post" action="<?php echo $link;?>" name="admin"> //Straight Forward
<select name="value1" onChange="this.form.submit();"> // 1Ste Drop Down Menu Starts here
<?php

$result = mysql_query("SELECT * from table");
echo("<option value=''>---Select---</option>");
if(mysql_num_rows($result)) {
while($row = mysql_fetch_row($result))
{
echo("<option value='$row[0]'>$row[0]</option>");
}
} else {
echo("<option value=''>No</option>");
}
echo "</select>";
?>

<?php
if(isset($_POST['value1'])){ // Checks if 1Ste Drop Down menu has a value.
$value1=$_POST['value1']; 
?>
<select name="value1" onChange="this.form.submit();"> //2nd Drop Down Menu Starts here
<?php
$result = mysql_query("SELECT * from table where table='$value1'");
echo("<option value=''>---Select---</option>");
if(mysql_num_rows($result)) {
while($row = mysql_fetch_row($result))
{
echo("<option value='$row[0]'>$row[0]</option>");
}
} else {
echo("<option value=''>No Data</option>");
}
echo "</select>";	
?>	
	
<?php
}else{
	echo "\n";
}
?>
<?php
if(isset($_POST['value2'])){ // Checks if 2nd Drop Down menu has a value.
$value2=$_POST['value2'];
?>
	<select name="value3"> //3nd Drop Down Menu Starts here
<?php
$result = mysql_query("SELECT * from table where table='$value2'");
echo("<option value=''>---Select---</option>");
if(mysql_num_rows($result)) {
while($row = mysql_fetch_row($result))
{
echo("<option value='$row[0]'>$row[0]</option>");
}
} else {
echo("<option value=''>No Data</option>");
}
echo "</select>";	
?>
<?php
}else{
	echo "\n";
}
?>
<input type='submit' value='Select'>

Please help.
I don't know where my mistake is, but i have tried to write code that is able to pull data from mysql column and populate them in a drop down list.

I have only managed to create a drop down list but has no data

The code you need is posted right above.

Thanks for ta quick response. but i tried that and many more different options but nothing. this is the code i used

<?php
mysql_connect("localhost", "root", "")or
die(mysql_error());
mysql_select_db("cvms");
?>
<form>
<select style="width: 150px;>

<?php 
$result = "SELECT `FUNDCODE` FROM `car`";     
$result =mysql_query($result);
while ($data=mysql_fetch_assoc($result)){
?>
<option value ="<?php echo $column['FUNDCODE'] ?>" ></option>
<?php } ?>

</select>
</form>

Line 7 is missing a double quote.

Line 14: $column should be $data and the option tag contains no text.

i am able to populate the data dynamically in dropdown list but the problem is first selected data is disappearing while page refresh how to fix that please help...

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.