View Full Version : Modify a double drop menu to a triple

08-19-2010, 03:22 AM
I am presently using a script provided by http://javascript.internet.com/forms/country-state-drop-down.html. This script works great, however I need three sequential drop down menus rather than the two provided in this script. I need Country > Province/State > Cities. Unfortunately I am not a programmer, but generally muddle along to a resolution. In this case I am stumped. Can anyone show me what needs to be added to that existing script to convert it into a three menu script instead of two? I apologize in advance for my lack of scripting knowledge, but much of JavaScript leaves me thoroughly confused.

08-19-2010, 10:06 PM
This is not necessarily the best method, but I've attached a modified version of the code to this message. It is formatted slightly differently, but I hope it should be clear what to do.

Make sure you:
1. Adjust the function "populateState" to what is in the attachment. (I would just copy and paste the whole function, because one of the changes is hard to see).
2. Adjust the function "initCountry" to what is in the attachment.
3. Create the function "populateCity" written in the attachment.
4. Adjust the HTML section to what is written in the attachment.
5. Include the value for the variable "city" at the top of the file. (It gives examples of how to use it for a country with a state and one without).

I think that is all you have to do. I hope it does what you want. :)

08-20-2010, 03:23 AM
Thanks for that script. I've downloaded it and had a very quick look, and it looks like it might work. Let me get back to you in the next day or so when I've had time to try it. Thanks again. :)

08-20-2010, 05:42 PM
Quick question about the cities list of names. Does that require the Country code and the State code in front of each city name? i.e. CA:BC:Vancouver

08-21-2010, 08:45 AM
It works in two ways. If a state has been selected then it will look for cities with the word "STATE" before them, with both the country code and state code. If there are no available states to be selected it will look for the word "COUNTRY" and show cities from the entire country, requiring the country code.

Here are two examples:


The first one has "STATE" before it, and so requires both the country "UK" and the state "GLONDON" to be selected before the city London is displayed as an option.

The second one has "COUNTRY" before it, and so requires only the country "GB" to be selected. This way, if there are no states available to be selected the city can be given as an option anyway.

The main issue in my opinion is that, at the moment, if a state can be selected then one MUST be selected before a city can be selected. I could change the code to allow a city to be selected even if a state could be selected, but has not been chosen yet. Of course, you can write in the city within the text box that appears anyway. I wasn't sure what was best, so please just say.

08-21-2010, 04:55 PM
My confusion lies with two words. You are saying COUNTRY and you are saying COUNTY. I am not sure if this is a misspelling or if both words are used but in different places. In your reply you show an example as COUNTRY:GB:LONDON:London but refer to it as, quote "The second one has "COUNTY" before it..." end quote.

On the other point, I prefer it the way it is where the user MUST select a Country first, MUST then select a State within that Country, and then the preferred City within that State.

08-21-2010, 06:17 PM
Ooops! :eek: Sorry, that was a very unfortunate typo! I meant COUNTRY in both cases.

08-21-2010, 06:45 PM
Thanks for the clarification, and now things make sense. The site is slowly coming together, and my main remaining challenge is to start entering City names. Out of curiosity I selected a Country and a State, and then tried to enter a City name in the City select box, but no joy. So, back to using the old quill pen. {;-)

I sincerely want to thank you for your help. It's nice to know that there are people out there who are willing to share their knowledge so as to help those less knowledgeable. Now, if you ever want to set up an offshore company...


08-22-2010, 12:52 AM
I now have the entire code working as it should, with one exception. I have entered two cities here in my province, to test that I am doing the database entries correctly. From my perspective I have entered them exactly the same as you did in your samples. Ergo:

var city = '\

When I click on Select City after selecting CA and BC for my Country and State, I get 'undefined' for each of my entries, whilst your's show up. And yes, I have placed var postCity = ''; where it belongs. How have I screwed up this time?

08-22-2010, 08:49 AM
I think you meant something like this:


In your example, you did not enter a city code as well as the city name. So the format of the STATE type is:


And for the COUNTRY type it is:


The city code can be anything, so probably just a shortened name for the city would be best (rather than an actual code). Ive tried that and it works for me.
Thanks for your reply! I'll be sure to contact you if I need help setting up an offshore company in the future. ;)

08-22-2010, 06:20 PM
Yep, that worked. I am going to use airport codes (i.e Vancouver = YVR - Los Angeles = LAX) for each of the cities, so as to ensure that there is no duplication. My next challenge is to create a link for each city, so that when the user clicks on Canada - British Columbia - Vancouver s/he will be taken to a regular html page that contains only text about what is happening in Vancouver. The html pages will all reside on our server in California, and there will be one for each city (globally). fun, fun, fun.

Thanks again for your valued input. :)

08-24-2010, 01:00 AM
I'm getting nowhere on this. I had a user at another site suggest:

"Assuming the last field will also be a select list, just use the html pages for each city as the value of the options. Then use an onchange event such as this:" onchange="window.location=this.options[this.selectedIndex].value;"

However, I do not know where this would plug into the javascript that I'm using. There is only one onChange in that script (near the bottom) and it relates to:

var inputSel = document.createElement("SELECT");

So, assuming for the moment that the location of the required file is c:/capsulecomments.com/vancouver.html, where in onchange="window.location=this.options[this.selectedIndex].value;" does it go? Will it then read onchange="window.location=this.options[this.selectedindex].vancouver.html"?

08-24-2010, 10:08 AM
I think the user was suggesting you add the code where the city SELECT options list was created. This way, all the "this" values used will refer to the city SELECT object. Hence, "this.selectedIndex" would tell you which city was selected.

To add it in, simply look for the function: "populateCity". Next, scroll down until you find the line:

if ( selObj.type == 'text' ) {

Continue down to the line:


And add this code just below that line:

inputSel.setAttribute("onchange","javascript: if (this.selectedIndex!=0) {window.location='/capsulecomments.com/' + (this.options[this.selectedIndex].text) + '.html';}");

This means that immediately after a city is chosen the page will redirect you to: "/capsulecomments.com/" + cityNAME + ".html". This is a relative address so you may need to change "/capsulecomments.com/" to whatever you need.

As you can see, there are a few changes to the code. Firstly, the if statement prevents the user from selecting "select City" as their actual city. This should not be possible anyway, but just in case. Also, I have used the ".text" property instead of the ".value" property because this returns the city name. If you wanted the city code to be used in your html address, then you can change this back to ".value".

I think this will do what it is supposed to. However, at the moment, if a user on the site selects the wrong city by accident then s/he will immediately be redirected to the other page, before s/he can change their answer. It would not be too difficulty to change this so the person is asked if they are sure, although that itself may be more annoying anyway. :confused:

08-24-2010, 06:53 PM
The script now works exactly the way I need. You have the heartfelt thanks of an old guy. Nice to know that there are other people like me out there. Help others when you can, and it comes back around to you in multiples.

Thanks again.

08-26-2010, 03:19 AM
Well, at least it worked fine on my computer, where the web page and the .js are in the same directory. The same cannot be said when they are in the same directory on the web hosting server. I have been informed by my web hosting service that they want extra money for allowing me to have the .js on the server, which would double my annual costs. So, I have taken the contents of the .js file and place it at the very bottom of my html, just before /body. I enclosed it within <script type="text/javascript" language="javascript"> and </script> and uploaded that as my index.html file. Now my drop down boxes have stopped working. Fun, fun, fun...

08-26-2010, 03:25 AM
Hmmm... I think this may have to be changed, now that the .js info is in the html home page.

("onchange","java_script: if (this.selectedIndex!=0)

{window.location='capsulecomments.com/' + (this.options

[this.selectedIndex].text) + '.html';}");

08-27-2010, 07:43 PM
I give up! I'll pay Lunarpages the monthly fee that they demand, in order to have them let my .js file run on the hosting server. With that enabled, the entire site works as it should. Thanks for any and all input from everyone. I really appreciate it.

08-29-2010, 02:07 AM
If anyone wants to look at the web page coding, with the .js embedded, feel free to view it at capsulecomments.com. If anyone wants the .js script, tell me where you want me to send it and it's yours.

08-31-2010, 08:23 PM
Lunarpages admitted that they erred in requiring a fee, and did some substantial backpedaling. So, I have removed the javascript from the html page and installed it on the server. All appears well with one exception, and that is the drop down menu for City shows a box, but it does not populate. Country and State work fine. You can see what I mean at capsulecomments.com. The part of the .js that pertains to City is below, and all suggestions are welcome:

function populateCity() {
var selObj = document.getElementById('citySelect');
var foundCity = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
selObj.options[0] = new Option('Select City','');
selObj.selectedIndex = 0;
// Populate the drop down with states from the selected

state (and country)
var cityLineArray = city.split("|"); // Split into lines
//alert (cityLineArray);
var optionCntr = 1;
for (var loop = 0; loop < cityLineArray.length; loop++) {
lineArray = cityLineArray[loop].split(":");
if (foundState==true) { //take a city only from a

specified state:
typeCode = TrimString(lineArray[0]);
countryCode = TrimString(lineArray[1]);
stateCode = TrimString(lineArray[2]);
cityCode = TrimString(lineArray[3]);
cityName = TrimString(lineArray[4]);
} else { //no states so take a city from the

country itself:
typeCode = TrimString(lineArray[0]);
countryCode = TrimString(lineArray[1]);
stateCode = "";
cityCode = TrimString(lineArray[2]);
cityName = TrimString(lineArray[3]);
if (((typeCode=="STATE" && foundState==true) ||

(typeCode=="COUNTRY" && foundState==false)) &&

document.getElementById('countrySelect').value == countryCode &&

(document.getElementById('stateSelect').value == stateCode ||

foundState==false) && countryCode != '' && (stateCode != '' ||

foundState==false)) {
// If it's a input element, change it to

a select
if ( selObj.type == 'text' ) {
parentObj =

var inputSel =





("onchange","java_script: if (this.selectedIndex!=0)

{window.location='/capsulecomments.com/' + (this.options

[this.selectedIndex].text) + '.html';}");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById

selObj.options[0] = new Option

('Select City','');
selObj.selectedIndex = 0;
if ( cityCode != '' ) {
selObj.options[optionCntr] = new

Option(cityName, cityCode);
// See if it's selected from a previous

if ( cityCode == postCity && countryCode

== postCountry && stateCode == postState) {
selObj.selectedIndex =

foundCity = true;
// If the state has no cities, change the select to a

text box
if ( ! foundCity ) {
parentObj = document.getElementById

// Create the Input Field
var inputEl = document.createElement("INPUT");
inputEl.setAttribute("id", "citySelect");
inputEl.setAttribute("type", "text");
inputEl.setAttribute("name", "city");
inputEl.setAttribute("size", 20);
inputEl.setAttribute("value", postCity);
parentObj.appendChild(inputEl) ;

09-01-2010, 12:54 AM
For the hopefully final time, it now works. Again, thanks to those who assisted me with this.