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 importantcan you send it on my emailand a lot of thanks.
amer mohammed at 06:29PM, 2011/03/30.
John
This works great! Thanks for the code!
John at 09: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 02:03PM, 2011/05/05.
Renju
How can I use preemptive chained text boxes instead of select boxes. Please help me.
Renju at 04:49PM, 2011/05/22.
vothang
how do I set value IF it's texbox ,not combobox?
vothang at 04: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 05: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 01: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 07:51PM, 2011/07/05.
pol
Thanks this worked !!
pol at 12:37PM, 2011/08/01.
avnpgg
ok ..thats it.i want a query to retrieve records into drop down box and
avnpgg at 04: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 08:10PM, 2011/08/12.
Peter
Thank for your code.Better, you help me a server side language in asp like getCities.asp.
Peter at 09: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 10:19AM, 2011/09/20.
andrew
hi, how show my result in a div?thanks
andrew at 08: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 03:09PM, 2012/01/22.
Jack Kiss
Hi,Is there anyway to specify color styling of individual options and Label group option?
Jack Kiss at 04:20AM, 2012/03/18.
amit
How to give value from database in getCities.php pageplz help me...
amit at 11:17AM, 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 07: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 importantcan you send it on my emailand a lot of thanks.
You Stupid ARAB!
h at 03:52AM, 2012/08/22.
imoisili
please, help me my dropdown is not working
imoisili at 03: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 this1. Car = BMW2. Model = 7er3. Motor = 200PSwhen 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 helpingb
bernte at 01: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 04: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 06: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 07:06AM, 2014/02/24.
Raza A Mirza
Great!! WORKED WELL... Thankx Alot :)
Raza A Mirza at 02:19PM, 2014/05/20.
Krishantha
Hell, I am in need of a code to to use multiple boxes which should be able to expand the number of boxes also they should be populated by mysql database table.If you can send me a code, it is very much appreciated.Thank you in advance.Krishantha.
Krishantha at 12:02PM, 2014/12/23.

Post your comment

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

Unable to save captcha-image.