Bit Repository

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.

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.

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.

Sure, I’ll give you an update. Most probably tomorrow.

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

by the way,
how can i use this codes wherein the
states and county data are inside the database (mysql)?

@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!

@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

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.

@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

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.

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.

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.

I’ve updated the script. Now it works in IE

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

Sure! In populate_cities() there is a line:

form = city_select;

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

var form = city_select;

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

}

Apologies! I had mixed up the two drop_down files. Thankyou so much, everything works perfectly.

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

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

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?

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.

@m3: Check the following URL:

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

Analyze the source code to understand how it works!

@Damian: Check "Redirect to URL upon selection" from a post regarding the usage of onChange:

http://www.bitrepository.com/web-programming/javascript/basic-usage-of-the-js-onchange-event-handler.html

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!

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

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

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?

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

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…

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

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!

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.

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

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

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.

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>

Thanks for the explanation!

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.

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!

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.

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.

Do you have an example that uses Countries and States?

is it possible to add php coding inside a .js file?

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?

this didnt work folks

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?

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.

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