Dynamic Dependant DropDown List: US States & Counties

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 dropdown 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.

Download Dynamic Dependant DropDown

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.

Download

Comment via Facebook

comments

87 Comments

  1. says

    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

  2. Garfield says

    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?

  3. JoeyB says

    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?

  4. thiyaku says

    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…

  5. Angelo says

    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?

  6. Rudy says

    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. :)

  7. Stan says

    I would just like to thank you for sharing this dropdown menu. I’ve been looking all over for a solution such as this. The world needs more people like you.

    Stan K

  8. Alex Riemann says

    Thanks so much for the script… I m using the classic version and it works. However, I would like to know if there is some way I can keep the selected values of the county dropdown after form submission and redirection to error messages.
    Thanks in advance!

    • Gabriel C. says

      You can keep them by either using sessions ( in PHP it would be something like: <?php session_start(); $_SESSION['county'] = $_POST['county']; ?> in the page where the POST values are sent to ) or pass them in the URL bar or through POST forms (they can be added as hidden fields).

Leave a Reply

Your email address will not be published. Required fields are marked *