Chained Select Boxes Script

Chained Select Boxes Script will change the contents of the child select box corresponding to the values choosed in parent box.

Features

Using this script you can make the selectboxes present in your webpage more user friendly.
Chained Selections lets you "chain" multiple form select lists together.
Used to populate a selectbox with cities based on which country you choose.
This script is simple and ease of use.
Just copy the code in to your page and use it.

Preview

Downloads

HTML and JAVASCRIPT CODE:

<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function fillSelect(country) {
var url = "city.php?country=" + escape(country);
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange =go;
xmlhttp.send(null);
}
function go() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var response = xmlhttp.responseText;
var list=document.getElementById("City");
var cities=response.split('|');
for (i=1; i<cities.length; i++) {var x=document.createElement('option');var y=document.createTextNode(cities[i]);x.appendChild(y);list.appendChild(x);}}
}
}
function display()
{
var country=document.getElementById('country');
country.onchange=function() {
if(this.value!="") {var list=document.getElementById('City');while (list.childNodes[0]) {list.removeChild(list.childNodes[0])}
fillSelect(this.value);
}
}
fillSelect(country.value)
}
</script>
<body onload="display()">
<form name="select" id="select">
<select name="country" id="country">
<option>Select country</option>
<option>India</option>
<option>Pakistan</option>
<option>Srilanka</option>
</select>
<select name="City" id="City">
<option>Select City</option>
</select>
</form>
</body>

PHP CODE:

<?php
echo("ada");
$country=$_GET['country'];
echo($country);
function doIt($country) {
switch ($country) {
case "India":
return array('New Delhi','Mumbai','Kolkatta','Chennai');
break;
case "Pakistan":
return array('Islamabad','Karachi','Lahore');
break;
case "Srilanka":
return array('colombu','Trincomalee','kandy');
break;
}
}
$cities=doIt($country);
foreach ($cities as $city)
{
echo '|'.$city;
}
?>

Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy and paste the html and javascript code in your html file to make use of this chained selectboxes ajax script.
Call the display() function using onload() in your body tag.
Copy the php code and save as city.php in the same folder in which your html file is present.
You can change the select boxes options easily according to your requirement in both the html file and php file.