Download AJAX chained select

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

PHP

This script requires PHP. You can also other server side languages if you rewrite the code for getCities.php(See below)

Put this into your <HEAD> section

<style type="text/css">
body{
	background-repeat:no-repeat;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	height:100%;
	background-color: #FFF;
	margin:0px;
	padding:0px;
}
select{
	width:150px;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
/************************************************************************************************************
Ajax chained select
Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com


************************************************************************************************************/	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>

Put this into your <BODY> section

<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
	<tr>
		<td colspan="2"><b>Second example</b></td>
	</tr>
	<tr>
		<td>Category: </td>
		<td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)">
			<option value="">Select a category</option>
			<option value="1">Cars</option>
			<option value="2">Boats</option>
			<option value="3">Airplanes</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>Sub category: </td>
		<td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory">
		
		</select>
		</td>
	</tr>
</table>
</form>

Download Javascript file

I have used the Simple Ajax Code Kit library(SACK) for this script. I have made a copy available for download here.

Put ajax.js in a subfolder called "js" or change the path to the file in the code above(i.e. <script type="text/javascript" src="js/ajax.js"></script>)

Configuration

This script works like this:

Someone select a country from the select box. This triggers the function getCityList()
Ajax executes the file getCities.php to get a list of cities from the selected country
The script executes the response from Ajax, i.e. creates a list of cities in the second select box

getCities.php

Ajax sends a request to the file getCities.php which returns a list of cities. A server side script like this will usually return data from a database. However, I have in this demo used static data to make things simple.

Here's the content of getCities.php:

<?php

if(isset($_GET['countryCode'])){

  switch($_GET['countryCode']){

    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";

      break;
    case "dk":

      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";

      break;
    case "us":

      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";

      break;
  }
}

?>

Copy the code and create the file getCities.php. Put it in the same folder as the main script

Comments

hello,
i write code above it don't work well.
i need this code very important
can you send it on my email
and a lot of thanks.

amer mohammed at 08:29PM, 2011/03/30.

This works great! Thanks for the code!

John at 11:22PM, 2011/04/13.

This code is working great for me in Firefox, Chrome and Safari; however it's not working in IE. In IE an error is thrown at the "eval" line of listCascadeHead.php. I've read IE has some issues with the "eval" function.

Wondering if there are any suggestions on getting this script to work in IE.

Thanks.

Kevin Hill at 04:03PM, 2011/05/05.

How can I use preemptive chained text boxes instead of select boxes. Please help me.

Renju at 06:49PM, 2011/05/22.

how do I set value IF it's texbox ,not combobox?

vothang at 06:02PM, 2011/05/30.

THanks for this code. It works well in my localhost (typo3) but does not work in on the Internet. I tried on two domains, it still did not work. No errors though.

Seyi at 07:42PM, 2011/06/25.

Thanks for the script.
I ended up using it with the database http://worldcitiesdatabase.info.

They work great together.

Glenn Brown at 03:41PM, 2011/06/26.

Like Seyi above, this has been working great for me on localhost, but does not work on either of my hosted domains.

I am getting an "unterminated string literal" error at the line "eval(ajax[index].response); // Executing the response from Ajax as Javascript code"

and this error is occurring in all browsers. Please help!

Nat at 09:51PM, 2011/07/05.

Thanks this worked !!

pol at 02:37PM, 2011/08/01.

ok ..thats it.i want a query to retrieve records into drop down box and

avnpgg at 06:51AM, 2011/08/04.

Thanks,
The codes are work very well. However, If I have another chain, it does not work.
Example: I select Building - Give the Floor list then If I select the Floor List to display the rooms in that floor - It does not work. Please help. Thanks again!

BV

bob vu at 10:10PM, 2011/08/12.

Thank for your code.
Better, you help me a server side language in asp like getCities.asp.

Peter at 11:05AM, 2011/09/17.

Hi its working fine but i also want to display a image like loader.gif before city list loades. How to do that?

arvind at 12:19PM, 2011/09/20.

hi, how show my result in a div?
thanks

andrew at 10:29PM, 2011/10/12.

I want multiple var obj and my code does not working.. What is the right code for this?

function createCities(index)
{
var obj = document.getElementById('subcode1','subcode2')
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}

desmon at 04:09PM, 2012/01/22.

Hi,

Is there anyway to specify color styling of individual options and Label group option?

Jack Kiss at 05:20AM, 2012/03/18.

How to give value from database in getCities.php page
plz help me...

amit at 01:17PM, 2012/05/08.

Try to Check your getCities.php code It´s probable that in that code some character broke one of the echo "obj.options[obj.options.length] = new Option ..."

You can check this adding one line:

alert(ajax[index].response);

In the function:

function createSubCategories(index)
{
alert(ajax[index].response);
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response);
}

then you are going to see an alert with all the text than your are putting in the select box!!!
Try to find something like

echo "obj.options[obj.options.length] = new Option('Ber,'1');\n";

If you note, the name of the city doesn't end property!!! ('ber, '1') It must be ('ber', '1')

<a href="#comment446">Kevin Hill wrote:</a>
This code is working great for me in Firefox, Chrome and Safari; however it's not working in IE. In IE an error is thrown at the "eval" line of listCascadeHead.php. I've read IE has some issues with the "eval" function.

Wondering if there are any suggestions on getting this script to work in IE.

Thanks.

<a href="#comment696">Nat wrote:</a>
Like Seyi above, this has been working great for me on localhost, but does not work on either of my hosted domains.

I am getting an "unterminated string literal" error at the line "eval(ajax[index].response); // Executing the response from Ajax as Javascript code"

and this error is occurring in all browsers. Please help!

Damian Sujoy at 09:55AM, 2012/05/25.

<a href="#comment267">amer mohammed wrote:</a>
hello,
i write code above it don't work well.
i need this code very important
can you send it on my email
and a lot of thanks.

You Stupid ARAB!

h at 05:52AM, 2012/08/22.

please, help me my dropdown is not working

imoisili at 04:07PM, 2012/11/18.

hi.. i got a little question..

i'm using your script with 3 selectboxes (works perfect) but i don't know what i have to change/add when i for example have this

1. Car = BMW
2. Model = 7er
3. Motor = 200PS

when i change select 1 to another car the 2nd select clears automaticly.. but not the 3rd selectbox! what can i do to clear the 3rd box??

thanks for helping

b

bernte at 02:56PM, 2013/01/16.