Dynamic Dependant DropDown List: US States & Counties

Posted on November 6, 2008, under JavaScript, jQuery,  Bookmark it

I was googling for a way to show a drop down menu with states that populates another menu with counties from the selected state. I found a nice dynamic dependent drop down script (with categories & subcategories) at dreamwebstore.com. However, adding over 2000 counties in a single JavaScript file is not such a good idea because such a script is quite big (200KB+) and in many cases (a slow internet connection, some downloads in progress etc.) it will take some time to load.

I’ve decided to keep the counties from each state in separate files. For instance, if we select Hawaii state (with 5 counties), only the hi.js file will load which has only a size of 515 bytes. To do this I’ve used the powerful JavaScript library JQuery.

Dependent DropDown Select Element

This is the HTML file that we will use to show the dropdowns:

The HTML File

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>Dynamic DropDowns with US States & Counties</title>

<!-- Style -->

<link rel="stylesheet" type="text/css" href="style/style.css" />

<!-- JQuery JS -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<!-- Drop Down JS -->
<script type="text/javascript" src="js/drop_down.js"></script>

<!-- Preload Images -->

<script type="text/javascript">

<!--
pic1 = new Image(16, 16);
pic1.src="style/loader.gif";
//-->
</script>

</head>

<BODY>

<div align="center">

<strong>DEMO</strong>
Select a state and see how the county drop down changes based on your selection
</div><br />
<form name="form">
<table width="317" border="0" align="center">

   <tr>
     <td width="100">State</td>
     <td width="217">
<select id="state" name="state">

<option value='AL'>Alabama</option>
<option value='AK'>Alaska</option>
<option value='AZ'>Arizona</option>
<option value='AR'>Arkansas</option>
<option value='CA'>California</option>

<option value='CO'>Colorado</option>
<option value='CT'>Connecticut</option>
<option value='DE'>Delaware</option>
<option value='DC'>District of Columbia</option>
<option value='FL'>Florida</option>

<option value='GA'>Georgia</option>
<option value='HI'>Hawaii</option>
<option value='ID'>Idaho</option>
<option value='IL'>Illinois</option>
<option value='IN'>Indiana</option>

<option value='IA'>Iowa</option>
<option value='KS'>Kansas</option>
<option value='KY'>Kentucky</option>
<option value='LA'>Louisiana</option>
<option value='ME'>Maine</option>

<option value='MD'>Maryland</option>
<option value='MA'>Massachusetts</option>
<option value='MI'>Michigan</option>
<option value='MN'>Minnesota</option>
<option value='MS'>Mississippi</option>

<option value='MO'>Missouri</option>
<option value='MT'>Montana</option>
<option value='NE'>Nebraska</option>
<option value='NV'>Nevada</option>
<option value='NH'>New Hampshire</option>

<option value='NJ'>New Jersey</option>
<option value='NM'>New Mexico</option>
<option value='NY'>New York</option>
<option value='NC'>North Carolina</option>
<option value='ND'>North Dakota</option>

<option value='OH'>Ohio</option>
<option value='OK'>Oklahoma</option>
<option value='OR'>Oregon</option>
<option value='PA'>Pennsylvania</option>
<option value='RI'>Rhode Island</option>

<option value='SC'>South Carolina</option>
<option value='SD'>South Dakota</option>
<option value='TN'>Tennessee</option>
<option value='TX'>Texas</option>
<option value='UT'>Utah</option>

<option value='VT'>Vermont</option>
<option value='VA'>Virginia</option>
<option value='WA'>Washington</option>
<option value='WV'>West Virginia</option>
<option value='WI'>Wisconsin</option>

<option value='WY'>Wyoming</option>
</select>
	 </td>
   </tr>
   <tr>
     <td height="33">County</td>

     <td><div id="county_drop_down">
	 <select id="county" name="county"><option value="">County...</option></select>
	 </div>

	 <span id="loading_county_drop_down">
	 <img src="style/loader.gif" width="16" height="16" align="absmiddle">&nbsp;Loading...
	 </span>

	 <div id="no_county_drop_down">This state has no counties.</div></td>
   </tr>
 </table>
 </form>
</body>

</html>

In the head section of the page I’ve included the JQuery library, the JS Drop Down County Changer file, some JavaScript to preload the GIF loader image (which appears instantly when you select a state and wait for the county drop down to show) and some CSS code that hides some parts of the HTML when we initially load the page (i.e.: the county drop down loader).

JavaScript Drop Down Counties Loader (drop_down.js)

function drop_down_list()
{
  var state = $('#state').val();

    // Alaska and District Columbia have no counties
    if(state == 'AK' || state == 'DC')
    {
    $('#county_drop_down').hide();
    $('#no_county_drop_down').show();
    }
    else
    {
    // Show the Loading...
    $('#loading_county_drop_down').show(); 

    // Hide the drop down
    $('#county_drop_down').hide();

    // Hide the "no counties" message (if it's the case)
    $('#no_county_drop_down').hide();

    $.getScript("js/states/"+ state.toLowerCase() +".js", function(){

    populate(document.form.county);

    // Hide the Loading...
    $('#loading_county_drop_down').hide();

    // Show the drop down
    $('#county_drop_down').show();
  });
}
}

$(document).ready(function(){
$("#state").change(drop_down_list);
});

$(window).load(drop_down_list);

How it works?

When DOM is ready and a selection is made from the state dropdown, the drop_down_list() function is called. In this case the change event is triggered.

$(document).ready(function(){
$("#state").change(drop_down_list);
});

The states District of Columbia and Alaska have no counties. If the user selects any of them the county drop down disappears and in its place a message is shown, notifying the visitor that there aren’t any counties for the selected state:

$('#county_drop_down').hide(); // Hide Counties Drop Down
$('#no_county_drop_down').show(); // Show the 'no_county_drop_down' DIV

If a state with counties is selected, the script hides the previous selected drop down (and the ‘no counties’ message if it’s the case) and shows a loading message until the new drop down is loaded:

$('#loading_county_drop_down').show(); // Show the Loading...

$('#county_drop_down').hide(); // Hide the drop down
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case)

$.getScript("js/states/"+ state.toLowerCase() +".js", function(){

populate(document.form.county);

 	 $('#loading_county_drop_down').hide(); // Hide the Loading...
	 $('#county_drop_down').show(); // Show the drop down
});

One important aspect is the usage of the load event:

$(window).load(drop_down_list);

When the page loads first time, it automatically takes the already selected value from ‘state’ and fills the county dropdown by calling drop_down_list().

Counties JavaScript File

Here’s the content of a JS file that contains counties:

hi.js (Hawaii)

function populate(form)
{
form.options.length = 0;
form.options[0] = new Option("Select a county of Hawaii","");
form.options[1] = new Option("Hawaii County","Hawaii County");
form.options[2] = new Option("City & County of Honolulu","City & County of Honolulu");
form.options[3] = new Option("Kalawao County","Kalawao County");
form.options[4] = new Option("Kauai County","Kauai County");
form.options[5] = new Option("Maui County","Maui County");
}

The populate() function resets the counties drop down (form.options.length = 0;) and populates it with new values.

Get the script

You can get the whole package with the US States and Counties. Additionally, the ZIP file also contains a bonus: a version of the application that works with MySQL database. The `states` and `counties` are stored in a database. The SQL data can be easily imported using a PHP file from the package.

"Subscribe to the blog"
Receive an update straight to your inbox every time I publish a new article. Your email address will never be shared

Tags:

Related Posts

83 Replies to "Dynamic Dependant DropDown List: US States & Counties"

  1. Angelie
    January 22, 2010 at 3:05 AM
    Reply

    Hi! Thanks for the script! We’ve used it in the site us-hometours.com but looks like that it takes forever to load the counties. Can you please give me an idea on how to resolve this performance issue?

    1. Gabriel C.
      January 22, 2010 at 3:12 AM
      Reply

      Actually, it doesn’t populate the County DropDown. Check line 28 from drop_down.js:

      populate(document.form.county);

      It tries to populate any data to the form that has the name “form” and the county element. The form that has the id “searchform” should be named “form”. If you want to give a different name to it, such as “search_form” then update line 28 too:

      populate(document.search_form.county);

      Good luck!

      1. Angelie
        January 22, 2010 at 3:51 AM
        Reply

        My bad! I was like “googling” for hours, tried different ways to cache the js files. >_<
        Thanks much! Appreciate the quick response. Good luck too! :)

  2. Jim Dukarski
    March 26, 2010 at 2:47 PM
    Reply

    I’m sorry I never returned a remark to your message. I have been traveling. I am new to setting up a website and have not tried out your state and county code yet. Attempt to do so will be made in several days. I will let you know if it works out. Thank You.

  3. Jefferson Lulu
    April 4, 2010 at 2:29 PM
    Reply

    Yeah, it’s useful to me. I customized it for my ASP pages. Thanks,. :)

  4. Adrienne
    April 16, 2010 at 7:54 AM
    Reply

    It works beautifully locally, but it stops working when I upload it to a server. The state dropdown displays and the “loading” message appears for the county dropdown, but the little gif spinner keeps spinning and spinning and the county dropdown never loads. I did customize it, but I left all the names, ids and the like the same so it should work and it does locally anyway. Here’s where I’m using it (http://www.voiceofwomensgolf.com/preview/adminAdd1.php). Any ideas why it would work locally and stop working when I upload it on a server? Any help or advice you can provide would be greatly appreciated.

    1. Gabriel C.
      April 16, 2010 at 10:48 PM
      Reply

      I noticed that you made some changes to the drop-down. It doesn’t contain the states list anymore. If you can give me FTP access to the location where you have installed the script, I can make make it work in exchange of a small fee. If you are still interested, let me know.

      1. Pincus
        May 11, 2010 at 4:12 AM
        Reply

        it works up to:

        $.getScript(“/states/”+ state.toLowerCase() +”.js”, function(){

        it keeps spinnig… i commented out the getScript function call to the jquery and place the show outside the function call and the drop_down.js worked fine its the getScript call which is not working??

        1. Gabriel C.
          May 11, 2010 at 10:55 AM
          Reply

          Works fine for me. I’ve noticed that you changed the path to make it work. I’ve suspected that this may be the problem in the first place. Just let me know if you have any other problems/questions.

          1. pincus
            May 12, 2010 at 1:40 AM

            thanks… thanks… just disregard my previous messages…. it works excellent i am using the database version with cgi not with PHP its works very good thanks again…

  5. John
    April 17, 2010 at 10:34 AM
    Reply

    I can’t get your code to work in WordPress. It’s driving me nuts! I even bought your package just to make sure i had the right code.

    I have 2 identical pages in the same folder: page.html (regular page that doesn’t run under WordPress) and a page dynamically made via WordPress (made from a Page Template that has your html inside of it)

    The html version runs fine. The WP version gives me the spinning gif and the “loading…” text. When i look at the source code for each page, they are identical. Well, relative paths to the js files are a bit different, but the links are correct)

    Any idea what’s going on?

    1. Gabriel C.
      April 17, 2010 at 10:45 AM
      Reply

      @John, first of all thanks for buying the package. The setup of this script does require some basic knowledge of HTML and JavaScript (even PHP if you use the code that works with a MySQL database) to install it, whether you want to make it work with WordPress, Joomla or any other PHP Script. I am not saying that you don’t have it but some things can be tricky and as you said “it drove you nuts”. I am willing to help you setup the script on your WordPress blog, free of charge. Just write me at support [ @ ] bitrepository ( . ) com to discuss more about it ;-)

    2. John
      April 18, 2010 at 1:30 AM
      Reply

      For anyone trying to get it to work with WordPress, here is what i did:

      The drop_down.js file has a line that points to one of the states .js files. In WP, you need the full path to begin with: /states….

      And because i don’t know how to mix php with a javascript “file”, i had to put all the drop_down.js code inside the actual web page, and not linked.

  6. Brian
    May 26, 2010 at 7:57 AM
    Reply

    Gabriel-

    I downloaded and installed- I’d like to add another select list for my country’s – I have these in a database as well as the db tableobtrusive select list

    what js script would I use to do the following:
    customer selects country value US displays state and county select lists other wise hidden ie UK

  7. Mats Ulf
    August 17, 2010 at 8:50 PM
    Reply

    We are looking for a solution where you have 8 dropdowns and you can choose to start in any of the dropdowns and the others are dynamically updated.
    Does anyone knows where I can find such a solution?

    //Mats

  8. Eric G.
    November 23, 2010 at 4:43 PM
    Reply

    Thank you for this wonderful script!

    I am using Drupal and trying to integrate this into a some sort of form builder where users can enter data, including their state/county. Any suggestions on how to get this integrated? I unfortunately have no idea… any advice is GREATLY appreciated! Thank you so much!

    Sincerely,
    Eric G.

    1. Gabriel C.
      November 23, 2010 at 11:05 PM
      Reply

      So you want to integrate the script without any changes to a form builder. Is that correct? Is the form builder page available for everyone or only for logged in users? Can you share me the URL to that page?

      1. Eric G.
        November 24, 2010 at 11:28 AM
        Reply

        That is correct. The form builder will only be available to registered logged in members. I do not yet have this active on a URL but I am using Drupal 6 and am trying to integrate it into the Webform/Form Builder module, both of which offer JQuery support (which I believe is what I need in order to do this?) – is there anything I can provide you so you have a better vision of what’s going on? This integration is really important for our functionality and I truly appreciate your assistance!

        Happy Thanksgiving!
        Eric G.

  9. Erik Torres
    January 25, 2011 at 6:27 AM
    Reply

    Great script, how would I add a third dependent list box? dependent from the selection on the second list box…

    1. Gabriel C.
      January 26, 2011 at 9:41 AM
      Reply

      You will have to create a second function similar to drop_down_list() and trigger it when the second drop_down is selected.

      Under $("#state").change(drop_down_list); you could add $("#county").change(drop_down_list_two);

      AND Make sure you change all the IDs to be unique ;-)

      1. Erik Torres
        January 27, 2011 at 9:14 AM
        Reply

        Thanks for your reply. Your script has been really helpful!

  10. Craig
    February 9, 2011 at 10:52 AM
    Reply

    Hi, great solution, although it seems to not play nicely with Chrome and Safari. Any ideas for a fix?

    Thanks.

  11. Gary
    February 19, 2011 at 3:11 PM
    Reply

    Gabriel

    I was able to make the script work on one page, but not on a second. I changed line 28 in the js file to read the name of the form, but it does not work.

    I even copied and made a second js file and changed the name in case there was some conflict, but that did not work.

    It seems that I am only able to get it to work when there are no other input fields in the form.

    Ultimately I want to be able to choose more than one county.

    Any advice you can offer?

    Thank you

    Gary

  12. Garfield
    March 7, 2011 at 7:32 AM
    Reply

    Hi, great script.
    I had a quick question. I was able to make the script work and add values to a database. However, it’s on a form and when I access the previous entries, the data for my state field is nicely populated but since the county field is automatically updated onpage load, it overwrites the info coming from the database and fills the county dropdown with the options for it’s corresponding state. Any suggestions?

  13. JoeyB
    March 9, 2011 at 5:15 AM
    Reply

    Great script, will save me hours of work. How can i set this up either default to a certain state or default to something like “Choose”. Rather than everytime the page loads it comes up to Alabama and Autauga County?

  14. rama
    May 18, 2011 at 12:04 AM
    Reply

    can anyone give me the code for above in yii framework

  15. thiyaku
    August 2, 2011 at 10:45 PM
    Reply

    Its works..but i cant get value from country dropdown in asp.net using c#..
    why… how can i get value and text from country ….pls as soon as fast…

  16. Angelo
    November 5, 2011 at 6:35 AM
    Reply

    I used the php version of the script and works great…
    But i ran into a small problem..
    Is there a way to have a default option value of .
    The script automatically loads all the counties of a state what if i want to make a query in all counties?

  17. Rudy
    November 9, 2011 at 11:33 AM
    Reply

    I’m with Garfield a few posts up…for adding new data it’s awesome. When I go into EDIT mode, I’d love to be able to “turn off” the auto-load and leave it with a “on change” mode.

    JavaScript hates me, so I’m not sure how to do this. :)


Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)