Download AJAX chained select

Demo

Bookmark and Share

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

Put this into your <BODY> section

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

amer mohammed
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.
John
This works great! Thanks for the code!
John at 11:22PM, 2011/04/13.
Kevin Hill
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.
Renju
How can I use preemptive chained text boxes instead of select boxes. Please help me.
Renju at 06:49PM, 2011/05/22.
vothang
how do I set value IF it's texbox ,not combobox?
vothang at 06:02PM, 2011/05/30.
Seyi
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.
Glenn Brown
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.
Nat
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.
pol
Thanks this worked !!
pol at 02:37PM, 2011/08/01.
avnpgg
ok ..thats it.i want a query to retrieve records into drop down box and
avnpgg at 06:51AM, 2011/08/04.
bob vu
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.
Peter
Thank for your code.
Better, you help me a server side language in asp like getCities.asp.
Peter at 11:05AM, 2011/09/17.
arvind
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.
andrew
hi, how show my result in a div?
thanks
andrew at 10:29PM, 2011/10/12.
desmon
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.
Jack Kiss
Hi,

Is there anyway to specify color styling of individual options and Label group option?
Jack Kiss at 05:20AM, 2012/03/18.
amit
How to give value from database in getCities.php page
plz help me...
amit at 01:17PM, 2012/05/08.
Damian Sujoy
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.
h
<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.
imoisili
please, help me my dropdown is not working
imoisili at 04:07PM, 2012/11/18.
bernte
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.
kasia
Hi,
Great script thanks for this!
I'm wondering how I can call the script when first loading the page. I have a contact form and sometimes there are links elsewhere to the contact form which pass it a variable, e.g. the country. Based on this GET variable I'd like to call the script to then populate the cities select box.
Works fine otherwise.
Thanks!
kasia at 05:21AM, 2014/02/24.
kasia
<a href="#comment4672">kasia wrote:</a>
Hi,
Great script thanks for this!
I'm wondering how I can call the script when first loading the page. I have a contact form and sometimes there are links elsewhere to the contact form which pass it a variable, e.g. the country. Based on this GET variable I'd like to call the script to then populate the cities select box.
Works fine otherwise.
Thanks!


Figured it out, if anyone else needs this. I put this above the script given with this tut, and also put the entire script section below the form otherwise I'd get errors.

var passedCountry = "<?php echo $_GET["country"]?>";
if (passedCountry){
getRegionList(passedCountry);
}
kasia at 07:51AM, 2014/02/24.
kasia
I forgot to add I also changed the first select's onchange to this:

<select name="country" id="country" onchange="getRegionList(this.options[this.selectedIndex].value)">

and in the script i removed this line:

var typeCode = sel.options[sel.selectedIndex].value;
kasia at 08:06AM, 2014/02/24.
Shawn Mike
Good job i also got my codes, thanks for sharing.
http://www.logodesignbest.com/
Shawn Mike at 01:07PM, 2014/04/02.
Johna21
I appreciate your wordpress web template, exactly where did you down load it through? dddedagdddec
Johna21 at 05:08PM, 2014/05/07.
Johnk917
Very good blog post.Really thank you! Fantastic. bdbcegbkkede
Johnk917 at 05:09PM, 2014/05/07.
Raza A Mirza
Great!! WORKED WELL... Thankx Alot :)
Raza A Mirza at 04:19PM, 2014/05/20.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com