hii friends
i am trying to create a drop down menus in which my 2nd menu will depend on 1st one ...and 3rd on 2nd and so on til 5 dropdown menus.

for eg if my 1st menu contain
India
US
Canada
and then suppose i select Canada then my 2nd dropdown menu should Display me all the cities in canada...
.....
... & so on.
nw the point is every dropdown menu(from 1st till last) has to take data from database.(depending on 1st selection by user)...my database is mysql.
i want all five menus on one page
i am trying to do it with ajax and php please help i m not able to solve it.


MY CODE IS

MAIN.php
<html>
<head>
<script>
function getXMLHTTP()
 { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try
					{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
					}
			catch(e)
				{
				try{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
    }
	
	function getmodel(makeid) 

{		
	
		var strURL="findmodel.php?make="+makeid;
		var req = getXMLHTTP();
		
		
		if (req)
 {
			
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4)
					 {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('modeldiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}	
		
			req.open("GET", strURL, true);
			req.send(null);
		}
		
	}
	function getsno(makeid,modelid)
 {		
		var strURL="findsno.php?make="+makeid+"&model="+modelid;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4) 
					{
					// only if "OK"
					if (req.status == 200)
					 {						
						document.getElementById("modeldiv").innerHTML=req.responseText;						
					} 
						else 
						{
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">make</td>
    <td  width="150"><select name="make" onChange="getmodel(this.value)">
	<option value="">make</option>
	<option value="1">Hp</option>
	<option value="2">Dell</option>
        </select></td>

  </tr>
  <tr style="">
    <td>model</td>
    <td ><div id="modeldiv"><select name="model" >
	<option>Select make First</option>
        </select></div></td>
  </tr>
  <tr style="">
    <td>sno</td>
    <td ><div id="snodiv"><select name="sno">
	<option>Select model First</option>
        </select></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>
FINDMODEL.php
<?php

$make=intval($_GET['make']);
$link = mysql_connect('localhost', 'root', 'success1234'); //changet the configuration in required
if (!$link)
 {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('my_db');
$query="SELECT modelno FROM model WHERE makeid='$make' ";
$result=mysql_query($query);

?>
<select name="--make--" onchange="getsno(<?=$make?>,this.value)">
<option>--Select model--</option >
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['id']?>>  <?=$row['modelno']?></option>
<?
 } 
?>
</select>
FINDSNO.php
<? php
$makeid=intval($_GET['make']);
$modelId=intval($_GET['model']);
$link = mysql_connect('localhost', 'root', 'success1234'); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('my_db');
$query="SELECT id,sno FROM serialno WHERE makeid='$makeid' AND modelid='$modelid'";
$result=mysql_query($query);

?>
<select name="sno">
<option>Select sno</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['sno']?></option>
<? } ?>
</select>

Each one needs to have an onChange to fill the next dropdown, each time needing the values from the previous dropdowns. In the most basic form, every dropdown has it's own onChange function, that calls a different PHP file on the server.

Thanx pritaeas

but i m using onchange event in my main.php file and aswellas in findmodel.php file..where is the error in my code...n hw to correct it

What doesn't work ?

i can see options of 1st drop down menu bt not the second and this
in 2nd menu it just says select make

even though i have created mysql database for the same..bt still not working.
Please help me pritaeas

$modelId on line 4 is with a capital I. In your query on line 10 it is not. Fix that, it breaks your query.

pritaeas thanx for the help but its still not working

You will have to try each part yourself and determine which one does not work as expected. Don't know if I will have time to try your code.

yes pritaeas i m doing it that ways now...and nw my 1st drop down n second dropdown are working not third..i m working on that if u wil get time plz do look at my code for corrections.

Thanks in advance

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.