Chained Select Boxes Script

About

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

Features

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

Preview

Code

HTML and JAVASCRIPT CODE:

<!-- Script by hscripts.com -->
<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>
<!-- Script by hscripts.com -->

PHP CODE:

<!-- Script by hscripts.com -->
<?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;
}
?>
<!-- Script by hscripts.com -->

Release Date :23-04-2010.
Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

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

License

- Ajax Scripts are given under GPL License
- i.e. Free use for those who use the examples as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet GPL License terms.