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.

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