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

Download

Comment via Facebook

comments

Comments

  1. Rebecca says

    I am trying to manipulate this script (which is excellent) to include a third value – cities withing the counties, but I can’t figure out how to do it! I have all of the cities ready to go, but I am unable to figure out how.

  2. Gabriel says

    You need to associate each county with the cities within it. Since there are many cities it’s not recommended to store all in a single file. Therefore, it’s best to keep them in separate files, for each county. Imagine how many JS files you need for almost 2,000 counties :) A second option would be to store the cities in a single file. It would be large & depending on the user’s internet connection it may take some time to load.

    PS: A third option can be to show a text box where the user will type the city after he selects the county.

  3. Rebecca says

    I tried to do that with a test file using one county, but was unable to get it to work. I am not a php or ajax wiz here so I am finding it difficult. I know you don’t get paid for this, but do you think you might be able to send me a basic script example for a separate js file with county cities and the two scripts (the actual function script and the html portion) which would work? I think the best option would be to have the cities in the state file. It would be smaller than a huge list, less work than 2000 separate county files and workable. I think I would rather do this than use the db.

  4. says

    hi..thanks for this excellent codes..it really helped me..
    even if it was just a simple program for you..
    but it was a huge help for a young programmer like me..

    i am currently doing my special project (thesis)..
    and i am new in web application world..
    i was just making stand-alone program before..
    that’s why i am not expert in PHP, JavaScript, ASP and HTML..

    thank you very much..

  5. Gabriel says

    @Rebecca: Here’s a way to include the 3rd value (cities within the counties):

    1. Create the cities dropdown. Add a new row to the already existing table:

    <tr>
         <td height="33">City</td>
         <td><select id="city" name="city"><option value="">City...</option></select></td>
       </tr>
    

    For instance you need to link cities for the ‘Brazos’ and ‘Calhoun’ counties from the state Texas. You need to edit the tx.js file. After the populate() function add another function: populate_cities():

    function populate_cities(county, city_select)
    {
    var form = city_select;
    form.options.length = 0;
    
    if(county == "Brazos County")
    	{
    form.options[0] = new Option("Select a city/town from Brazos County","");
    form.options[1] = new Option("Bryan","Bryan");
    form.options[2] = new Option("College Station","College Station");
    form.options[3] = new Option("Kurten","Kurten");
    form.options[4] = new Option("Millican","Millican");
    form.options[5] = new Option("Wixon Valley","Wixon Valley");
    	}
    
    	if(county == 'Calhoun County')
    	{
    	form.options[0] = new Option("Select a city/town from Calhoun County","");
    form.options[1] = new Option("Point Comfort","Point Comfort");
    form.options[2] = new Option("Port Lavaca","Port Lavaca");
    form.options[3] = new Option("Seadrift","Seadrift");
    	}
    
    }
    

    2. Find the following line from the HTML page containing the selects:

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

    Replace it with:

    <select 
    onChange="JavaScript: 
    populate_cities(this.options[this.selectedIndex].value, document.form.city);" 
    id="county" name="county"><option value="">County...</option></select>

    This way if you select a county the populate_cities() function is triggered (in this case only in the tx.js file) and the ‘city’ dropdown would be populated.

    Here’s a live demo:

    http://www.bitrepository.com/demo/dynamic-dependent-dropdown-list-2/

    PS: It only works for the Texas Counties: Brazos & Calhoun.

    Good luck!

  6. Gabriel says

    @ZenZen: Thanks for your comments! I’m glad that this script helped you. To modify the script in order to get the states & counties from the DB you must have some knowledge regarding relational databases. You need to make a table that will contain the states & one that will contain the counties. Each county must be associated to a state. This is usually done through an ID that is used to link a county to a state. You also need to dynamically create the states dropdown & add PHP code, in each JS county file, that will fetch the counties for the selected state from the DB. For example the tx.php file will retrieve counties for the Texas state,. Here’s a sample:

    txt.php

    <?php
    include 'db_connect.php';
    
    // some sql queries here
    
    header("content-type: application/x-javascript");
    ?>
    
    // the javascript code here
    
  7. a webmaster says

    Hi; Thankyou very much for an excellent script. I think your ‘city’ option may need some work, however – your live demo does not operate as it should. I tried to do a similar thing last night but, like you, could not find a way to add a third dropdown that depended upn the value in the second.

  8. Gabriel says

    @a webmaster: My ‘city’ option is just a basic example for someone who wanted to have an idea of how you can add a third dropdown depending on the second. I quite doubt that my live demo does not operate as it should. Perhaps you didn’t read my comment when I said that it works only for 2 counties from the Texas state.

    >>> I tried to do a similar thing last night but, like you, could not find a way to add a third dropdown that depended upn the value in the second.

    I did find the right way to do this, and it without any doubts, you can see that it works fine ;)

  9. a webmaster says

    Thankyou again. I must be doing something wrong! Your live demo definitely does not work for me (and yes, I chose both Brazos and Calhoun – neither worked). I have retested it on numerous occasions, and it always fails. I also downloaded the entire set of scripts to my computer – it failed there also.

  10. Gabriel says

    I’ve just tested it in 4 browsers (FF, Google Chrome, Opera & Safari) and it works FINE. However, I am quite surprised to see that in IE is not working. I will modify the script to work in IE too and send you an update. Thanks for noticing. MSIE surprises me once again.

  11. a webmaster says

    That is great, thankyou. Yes, I just realised that the problem was IE only. Once again, thankyou for all the hard work you have put into this script – it is excellent, and just what I have been looking for.

  12. a webmaster says

    Thankyou again. Did you make any changes to the drop-down.js file to make this script work in IE? If so, could you please publish the changes? We cannot view the source for this file; although your program works perfectly in your demo, it does not work in IE if I download it to my computer (but it works perfectly in FF).

  13. Gabriel says

    Sure! In populate_cities() there is a line:

    form = city_select;

    You need to add ‘var’ in front of it:

    var form = city_select;

  14. a webmaster says

    No, I am afraid that this still does not fix the problem: the script does not work in IE (but it works fine in FF).

    Here is my drop_down.js file (note that the GetScript line is different because my js file is located elsewhere):

    ———————–

    function drop_down_list(state)
    {
    if(state == ‘AK’ || state == ‘DC’) // Alaska and District Columbia have no counties
    {
    $(‘#county_drop_down’).hide();
    $(‘#no_county_drop_down’).show();
    }
    else
    {
    $(‘#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(state.toLowerCase() +”.js”, function(){

    populate(document.form.county);

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

    function populate_cities(county, city_select)
    {
    var form = city_select;
    form.options.length = 0;

    if(county == “Brazos County”)
    {
    form.options[0] = new Option(“Select a city/town from Brazos County”,””);
    form.options[1] = new Option(“Bryan”,”Bryan”);
    form.options[2] = new Option(“College Station”,”College Station”);
    form.options[3] = new Option(“Kurten”,”Kurten”);
    form.options[4] = new Option(“Millican”,”Millican”);
    form.options[5] = new Option(“Wixon Valley”,”Wixon Valley”);
    }

    if(county == ‘Calhoun County’)
    {
    form.options[0] = new Option(“Select a city/town from Calhoun County”,””);
    form.options[1] = new Option(“Point Comfort”,”Point Comfort”);
    form.options[2] = new Option(“Port Lavaca”,”Port Lavaca”);
    form.options[3] = new Option(“Seadrift”,”Seadrift”);
    }

    }

  15. m3 says

    Hi thanks a million for ur code .. i have been searching net and breaking my head for the past 10 days… i am new to web designing.. and planning to build a city guide for my place as shown in http://mapmash.googlepages.com/citysearch.htm
    i would like to have the list of entries below the dropdowns as shown in the site. Can you pls help me on this..

  16. Gabriel says

    If you're interested in adding a 3rd dropdown with cities (of counties) you should check the previous comments on this post.

  17. m3 says

    hi i want the third dropdown to hide unless there is a city for that particular country.. can u let me know what changes to be made? since i am a new bie…i do not know how to and where to change the code?

  18. Damian says

    The script looks really great, I have a doubt, how can I make a function to go to a different webpage when i choose a city on the second list: I mean i choose first Luisiana , in the second box I choose De Soto Parish County and from there being redirect to a specifil webpage.

  19. Gabriella says

    Hello :)

    Your script is worth a million to me! Thanks alot!

    BUT. When I changed the names of everything it did'nt work. Should I do any changes in the "jquery-1.2.6.min.js" ?

    I changed the names of all counties & states, and also the names in the files (exept in "jquery-1.2.6.min.js").

    There were soo much text all in a blurry mix in that file. I did not even try to read anything.

    I could do a "find-replace" if there were anything i need to change.

    For example, in the original file:

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

    if(state == 'AK' || state == 'DC') // Alaska and District Columbia have no counties
    {
    $('#county_drop_down').hide();
    $('#no_county_drop_down').show();
    }
    else
    {
    $('#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
    });
    }
    }

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

    $(window).load(drop_down_list);

    In my new file:

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

    if(area == '' || area == 'Välj') // Det ovalda alternativet har (självklart) inga kommuner
    {
    $('#kommun_drop_down').hide();
    $('#no_kommun_drop_down').show();
    }
    else
    {
    $('#loading_kommun_drop_down').show(); // Show the Loading…

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

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

    populate(document.form.kommun);

    $('#loading_kommun_drop_down').hide(); // Hide the Loading…
    $('#county_kommun_down').show(); // Show the drop down
    });
    }
    }

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

    $(window).load(drop_down_list);

    Thankful for help!

  20. Gabriel says

    @Gabriella: No, you do not have to change anything in “jquery-1.2.6.min.js”. Are you sure you changed correctly the “ID” name of the elements?

  21. Gabriella says

    I just notice some wrong links i had to the different files, but i still can't make it work.. I will search for more misstakes and return when it workes or if i need more help.

    Ty

  22. Gabriella says

    Hello again.

    Does this part have to be like this: "populate(document.form.county); " ?

    Couldn't I change it to "populate(document.form.monkey); " if I would like to? I guess so, and if I don't want the code to fail, should I change somewhere else?

    What I mean is; the "county"-part in "populate(document.form.county); ", is it depending on something else?

  23. Gabriel says

    @Gabriella: Yes, that part has to be like this because the parameter passed is actually the "county" select object. If you study one of the files that contain the populate() function you will see that the "county" is refilled with new options.

  24. Gabriella says

    Hi again.

    There seems to be an error in my code. The message I got was: "document.form is undefined".

    I haven't change anything in "jquery-1.2.6.min.js".

    It feels like there is 1 000 knots in my head that I cannot solve, and I think this error-message is the major thing…

  25. Gabriella says

    My program leads me to "populate(document.form.county);"

    The one I asked about earlier. Now, when i started all over, I didn't change a thing.

    Okey, I changed the "if" in "drop_down.js" to "if(state == 'choice')".

    Also, in index, I changed all the options in States to something like: "<option value='name'>Name</option>", and I changed the names of all the states to "name.js" so that the value (in option) is equal to the names in my file where I store the counties.

    Some search paths were changed by me too.

    Soo confused. Thankful for your help!!

  26. Gabriella says

    I am so happy now!

    The problem was that I never changed the name of the form that contained the drop-down menus.

    Ty again for this fantastic script!

  27. Tony says

    I have read the posts and have attempted to figure out how to develop 3 dependent listboxes where at the selection in the last listbox, it launches a url.

    First List: State
    Second List: City
    Third List: School

    Upon selection of the school, it should launch the URL associated with the school.

    Any assistance in modifying the existing script to allow this to occur would be appreciated. I'd prefer to utilize XML files which contain the list of states, cities and schools.

    • Gabriel says

      You can use PHP to fetch the data from the XML file using Magpie RSS. Regarding the “URL launch” upon the school choice, consider checking the “Basic usage of the JS onChange() event handler” post (Redirect to URL upon selection). I’m sorry for the delayed reply but I have received many comments lately and missed to answer to all (in some days I didn’t have any internet connection). I hope you will find my information useful regarding both the XML parser and the URL redirection.

  28. Dave says

    Hi webmaster,

    This code is very useful to me as a new web designer, thank you! I would like to use it in my page that I'll soon put on Internet. Therefore, I would like to be sure that I can use this script without any problems with copyright or intellectual property.

    Thanks,
    Dave

    • Gabriel says

      You can use this script in any software you wish (even in commercial projects). However, you can not claim that it is your work.

  29. says

    Hi,

    I just have a question and I'm sure it's really dumb but what is the point of defining the option twice for the counties? What happens if you only define it once?

    form.options[5] = new Option("Maui County","Maui County");

    I only ask because I am working on a very large project that involves makes and models of cars and it would save hours to only have to define it once if it still worked. I'm just curious what defining it twice does.

    Thank you.

    • Gabriel says

      Actually, it doesn't define it twice. The first argument is the name text of the dropdown option and the second argument is the option's value. The former is visible in the DD. For instance "ny" can be the value of the option that has the name "New York". In our state case, it just happened to have the same value for both. You can modify the second argument by adding an abbreviation or a numeric code that is associated with the first argument (text). Here's an example:

      <select name="city">
      <option name="ny">New York</option>
      <option name="la">Los Angeles</option>
      </select>

      However, if in your case both the value and the text have the same value you can use only one argument:

      Example: new Option("Mercedes");

      It would look like this in the DropDown: <option>Mercedes</option>

  30. Matt says

    Hey Gabriel!
    Great code! I was able to add a 3rd drop down, how do I add a 4th that will display the same data as the 3rd? Yes, i want duplicate data. :)

    Thanks!

  31. says

    I looked at the code for the auto redirect that you sent Damian to and I cannot figure out how to incorporate that code into the state county redirect.

    If I want the redirect to go to another web page upon selection of Arizona, Maricopa county, how would that happen? What would that code look like?

    Thank you.

  32. Marc says

    Hi Gabriel – I want a user to be able to make 5 selections, different states and different counties on the same page – basically have 5 of the dropdown sets – can you pls. tell me what do I need to change and where. (newbie javascripter here)

    I tried just copying and having 2 dropdowns as a test (changed the second “form” to “form2″ in the html code) but nothing shows in the second dropdown county field.

    this script is great – thx for posting it and all the help you’re providing to others.

  33. Duane Gran says

    Where did you get the source data? For my needs I need to construct the js dynamically from a source, preferably a yml file. Can you direct me to where one would get a parsable source of counties by state?

  34. Stacie says

    I need to redirect to a URL after the County is selected. Does anyone have a working example or idea how I could accomplish this?

  35. ruffone says

    if no selection is made (if the selected value is ”) I want to say “No value was selected” so I added a new CSS called the “no_selection_drop_down”. I want to still show the “no_country_drop_down”. How do I add both to the if statement.

  36. ruffone says

    function drop_down_list() {
    var country = $(‘#countries’).val();

    switch (country) {
    // No country is selected.
    case ”:
    $(‘#country_drop_down’).hide();
    $(‘#loading_country_drop_down’).hide();
    $(‘#no_selection_drop_down’).show();
    break;
    // Countries that has no state.
    case ‘AL':
    case ‘DC':

    $(‘#country_drop_down’).hide();
    $(‘#loading_country_drop_down’).hide();
    $(‘#no_country_drop_down’).show();
    break;
    // Load file for selected country.
    default :
    $(‘#loading_country_drop_down’).show(); // Show the Loading…

    $(‘#country_drop_down’).hide(); // Hide the drop down
    $(‘#no_country_drop_down’).hide(); // Hide the “no counties” message (if it’s the case)
    $(‘#no_selection_drop_down’).hide();

    // ToDo: Check it script exist and respond appropriately if it is not.
    // This would be a good thing to do considering there is so many countries
    // it will take time to generated all the files. If the file was not present
    // the page would not freeze up. I do not know how to achieve this.
    $.getScript(“js/countries/” + country.toLowerCase() + “.js”, function() {

    populate(document.form.states);

    $(‘#loading_country_drop_down’).hide(); // Hide the Loading…
    $(‘#country_drop_down’).show(); // Show the drop down
    });
    break;
    }

    }
    $(document).ready(function() {
    $(“#countries”).change(drop_down_list);
    });

    $(window).load(drop_down_list);

  37. says

    I am working on something very similar to this.

    I’ve put all the states in a mysql table, and all the counties in another table, linked by state_id.

    Over 3100 counties. yuck.

    Any idea how to build this particular part of a form using mysql/javascript/php?

  38. says

    Mitch,

    I pulled the full list from the census.gov site. I don’t recall exactly where I found it, but if you like I can share with you a tab-delimitted text file or an SQL insert code if that would be helpful. Contact me via dgran at duanegran -dot- com.

    • Dennis says

      I was wondering if anyone has fixed the part where you select an option from the 3rd selection box to take you to a url or better yet print some info on the page..

  39. Angelie says

    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?

    • Gabriel C. says

      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!

      • Angelie says

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

  40. says

    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.

  41. Adrienne says

    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.

    • Gabriel C. says

      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.

      • says

        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??

        • Gabriel C. says

          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.

          • says

            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…

  42. John says

    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?

    • Gabriel C. says

      @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 ;-)

    • John says

      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.

  43. says

    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

  44. says

    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

  45. says

    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.

    • Gabriel C. says

      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?

      • says

        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.

  46. Erik Torres says

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

    • Gabriel C. says

      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 ;-)

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

  48. 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?

  49. 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?

  50. 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…

  51. 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?

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

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

  54. 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 *