Use values from different dropdown menus

Question

I am new to coding, therefore I don't fully understand this piece of code.
What I am trying to achieve is that I want to put in multiple drop down menus.

The problem with my code is that it accepts values from only certain drop down menus.

My code helps users select the region, country and state according to what they select in the previous drop down menus. I am using this code because it is similar to what I am planning to achieve.

The issue that I face is that I have about 8 drop down menus whose data need to be used. There are 8 region drop downs, 8 country drop downs, and 8 state drop downs. All in the same page. The code stops working if I put 8 ones. What am I doing wrong?

Can somebody please help me? This is the code:

<form>
Region&raquo; <select onchange="set_country(this,country,city_state)" size="1"     name="region">
<option value="" selected="selected">SELECT NOTE</option>
<option value=""></option>
<script type="text/javascript">
setRegions(this);
</script>
</select>
Country&raquo; <select name="country" size="1" disabled="disabled" onchange="set_city_state(this,city_state)"></select>
City/State&raquo; <select name="city_state" size="1" disabled="disabled" onchange="print_city_state(country,this)"></select>

<script>
    ////////////////////////////////////////////////////////////////////////////
// city_state.js ///////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

    var countries = Object();

countries['C'] = '|C|Cm|';
countries['D'] = '|D|Dm|';

////////////////////////////////////////////////////////////////////////////

var city_states = Object();

//C
city_states['C'] = '|032010|335553|';
city_states['Cm'] = '|335543|';
city_states['D'] = '|000232|557775';
city_states['Dm'] = '|000231|557765';

//////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////

function setRegions()
{
    for (region in countries)
        document.write('<option value="' + region + '">' + region + '</option>');
}

function set_country(oRegionSel, oCountrySel, oCity_StateSel)
{
    var countryArr;
    oCountrySel.length = 0;
    oCity_StateSel.length = 0;
    var region = oRegionSel.options[oRegionSel.selectedIndex].text;
    if (countries[region])
    {
        oCountrySel.disabled = false;
        oCity_StateSel.disabled = true;
        oCountrySel.options[0] = new Option('SELECT TYPE','');
        countryArr = countries[region].split('|');
    for (var i = 0; i < countryArr.length; i++)
        oCountrySel.options[i + 1] = new Option(countryArr[i], countryArr[i]);
    document.getElementById('txtregion').innerHTML = region;
    document.getElementById('txtplacename').innerHTML = '';
}
else oCountrySel.disabled = true;
}

function set_city_state(oCountrySel, oCity_StateSel)
{
var city_stateArr;
oCity_StateSel.length = 0;
var country = oCountrySel.options[oCountrySel.selectedIndex].text;
if (city_states[country])
{
    oCity_StateSel.disabled = false;
    oCity_StateSel.options[0] = new Option('SELECT TAB','');
    city_stateArr = city_states[country].split('|');
    for (var i = 0; i < city_stateArr.length; i++)
        oCity_StateSel.options[i+1] = new Option(city_stateArr[i],city_stateArr[i]);
    document.getElementById('txtplacename').innerHTML = country;
}
else oCity_StateSel.disabled = true;
}

function print_city_state(oCountrySel, oCity_StateSel)
{
var country = oCountrySel.options[oCountrySel.selectedIndex].text;
var city_state = oCity_StateSel.options[oCity_StateSel.selectedIndex].text;
if (city_state && city_states[country].indexOf(city_state) != -1)
    document.getElementById('txtplacename').innerHTML = city_state + ', ' + country;
else document.getElementById('txtplacename').innerHTML = country;
}

</script>

Please check out the updated code at http://jsfiddle.net/HzJ9J/1/ I have not pasted one javascript code in the Javascript section, because I think that specific code needs to run in the correct place. Not sure if I have to move it to the javascript section.

Bob Brown · Accepted Answer · 2014-07-22 14:44:23Z

1

The call to setRegions(this); is failing because 'setRegions is not yet defined; the function definition hasn't been loaded by the browser yet.

I added an ID attribute to your SELECT:

<select onchange="set_country(this,country,city_state)" size="1" name="region" id="region">

and then moved the call to setRegions to the very last thing before the closing SCRIPT tag. Can't use THIS any more, so I added a document.getElementById:

setRegions(document.getElementById("region"));

Using document.write is in general a bad idea, and will not work when the call to setRegions is moved out of line, as it must be. One can accomplish the same thing using innerHTML, so I changed setRegions to be this:

function setRegions(elem) {
    for (region in countries)
        elem.innerHTML +='<option value="'+region+'">'+region+'</option>';
}

I also deleted the empty OPTION element from the SELECT. Those changes make your code work, although there may be more things that need adjustment.

I'm supposed to answer questions, not give advice, but if you're not using Firefox and the Firebug debugger, or the similar tool in Chrome, you're working far too hard!

Edited 2014-07-21 to add: Your code:

<script type="text/javascript">
    setRegions(document.getElementById("region1"));
</script>

is between the beginning and ending tags for the SELECT with the ID of "region1", and I would have bet that the DOM element would not exist at the time of the call. However, if I move your JavaScript into the head of the document, the region selects work, at least in Firefox. I'm not sure why, and I strongly urge you to move that stuff to the end as I've done in my example, or hook it to onload. The DOM really does have to be set up before you start manipulating it.

However, when I run your code with the changes I just suggested, using the Firebug debugger, it tells me: TypeError: oCountrySel.options is undefined.

Get a copy of Firebug, install it in Firefox, or use the developer tools in Chrome, run your code from your own server environment, and look at the console tab. It really will help you, and it really isn't hard.

edited Jul 22, 2014 at 14:44

answered Jul 19, 2014 at 15:20

Bob Brown

1,5222 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sudhin Over a year ago

Hi Bob, I have tried as you mentioned. I am able to add another 3 dropdown menus, but only the first drop down menu is working. The rest of them are not working. What am I doing wrong? And I don't really know how to use the developer tools in Chrome :(

Bob Brown Over a year ago

Since your code is presumably now different from what you posted in your question, I do not know. You might put your current code in jsfiddle.net and edit your question to provide a pointer to it. If you are going to develop in JavaScript, you're going to have to learn the developer tools.

Sudhin Over a year ago

Hi Bob, I have put the code in jsfiddle.net. Can you please check it and tell me the mistake? Thanks a lot!!

Bob Brown Over a year ago

Stack Overflow appears to frown on extended conversations in the comments, so I've edited my answer.

Collectives™ on Stack Overflow

Use values from different dropdown menus

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related