kvnirvana Posted August 15, 2010 Share Posted August 15, 2010 How do I make a dynamic dropdown list? I need 3 drop down boxes all dependent on one another and the last drop down box will redirect to a specific page for that particular selection. I’ve got this but it doesn’t seem to work. Index. Php <html> <head> <title>Roshan's Triple Ajax dropdown code</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript" type="text/javascript"> // Roshan's Ajax dropdown code with php // This notice must stay intact for legal use // Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com // If you have any problem contact me at http://roshanbh.com.np 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 getState(countryId) { var strURL="findState.php?country="+countryId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('statediv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } function getCity(countryId,stateId) { var strURL="findCity.php?country="+countryId+"&state="+stateId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('citydiv').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">Country</td> <td width="150"><select name="country" onChange="getState(this.value)"> <option value="">Select Country</option> <option value="1">USA</option> <option value="2">Canada</option> </select></td> </tr> <tr style=""> <td>State</td> <td ><div id="statediv"><select name="state" > <option>Select Country First</option> </select></div></td> </tr> <tr style=""> <td>City</td> <td ><div id="citydiv"><select name="city"> <option>Select State First</option> </select></div></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </form> </body> </html> Findcity.php <? $countryId=intval($_GET['country']); $stateId=intval($_GET['state']); $link = mysql_connect('localhost', '****', '****'); //changet the configuration in required if (!$link) { die('Could not connect: ' . mysql_error()); } mysql_select_db('****'); $query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'"; $result=mysql_query($query); ?> <select name="city"> <option>Select City</option> <? while($row=mysql_fetch_array($result)) { ?> <option value><?=$row['city']?></option> <? } ?> </select> Findstate.php <?php $country=intval($_GET['country']); $link = mysql_connect('localhost', '****', '****'); //changet the configuration in required if (!$link) { die('Could not connect: ' . mysql_error()); } mysql_select_db('****'); $query="SELECT id,statename FROM state WHERE countryid='$country'"; $result=mysql_query($query); ?> <select name="state" onchange="getCity(<?=$country?>,this.value)"> <option>Select State</option> <?php while($row=mysql_fetch_array($result)) { ?> <option value=<?php=$row['id']?>><?=$row['statename']?></option> <?php } ?> </select> When I select from the first drop down list, it doesn’t show the contents from mysql it just shows > and < Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.