5 dependable drop downs using ajax

zohab · January 6, 2010

Hi,

In my project I have 5 drop downs

1.Country 2.State 3.Language 4.University 5.Month

When user select any drop down then all values shown and when one drop down value selected then all other drop down value changes

as per selected drop down values.

I need to implement this functionality in my project.I have ajax code working for two drop downs.

In the following example i have shown 2 drop downs example and values in getvalue.php hard coded but it will come from database.

file1.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Untitled Document</title>
<script language="javascript">
var xmlHttp

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }

var url="getvalue.php";
url=url+"?value="+str;
//url=url+"&sid="+Math.random();
//alert(url);


xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

//alert(document.getElementById("txtHint").innerHTML);

}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
</script>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data" name="frmAjax" id="frmAjax">
<table width="100" border="1">
  <tr>
    <td>Country</td>
    <td>
   <select name="country" id="country" onchange="showCustomer(this.value)">
    <option value="1">Uk</option>
    <option value="2">United States</option>
    </select>
   
   </td>
  </tr>
  <tr>
    <td>State</td>
    <td><p><div id="txtHint"></div>
   <div id="txtHint"></div>
</p></td>
  </tr>
</table>
</form>
</body>
</html>

getvalue.php


<?php
$value=$_REQUEST['value'];

?>
<?php if($value=="1") { ?>
<select name="state" id="state" style="width:110px; ">
             <option value="0">Select</option>
		 <option value="0">London</option>
		 <option value="0">Manchester</option>
      </select>
<?php } ?>


<?php if($value=="2") { ?>
<select name="state" id="state" style="width:110px; ">
             <option value="0">Select</option>
		 <option value="0">Newyork</option>
		 <option value="0">Texas</option>
      </select>
<?php } ?>

Sign In

5 dependable drop downs using ajax

Recommended Posts

zohab

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information