I have browsed StackOverflow and found a couple questions/answers that are close but not exact for my situation. I am following this example:

.shtml

And my JavaScript code is like this:

var cityList = document.selectionForm.cityListBox;
var cities = new Array();

cities[0] = "";
cities[1] = ["Eugene|eugeneValue", "Portland|portlandValue", "Salem|salemValue"];
cities[2] = ["Bellingham|bellinghamValue", "Onalaska|onalaskaValue", "Seattle|    seattleValue"];

function updateCities(cityGroup) 
{
    cityList.options.length = 0;

    if (cityGroup > 0)
    {
        for (i = 0; i < cities[cityGroup].length; i++)
        {
            cityList.options[cityList.options.length] = new Option(cities[cityGroup][i].split("|")[0], cities[cityGroup][i].split("|")[1]);
        }   
    }
}

And my HTML code like this:

<form name="selectionForm">
    <select name="stateListBox" size="3" style="width: 150px" onchange="updateCities(this.selectedIndex);">
        <option selected>Select a State >></option>
        <option value="oregon">Oregon</option>
        <option value="washington">Washington</option>
    </select>

    <select name="cityListBox" size="3" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
    </select>
</form>

As far as I can tell, this should work as described by the link above. I have had great experiences with the JavaScript Kit website, but this time I think I am missing something.

When I actually publish this to the page, I can click the states but nothing appears in the city box, as is expected.

Can anyone see the problem here?

Any help is appreciated.

PS - I apologize if there is a double post that I missed. Any references are also greatly appreciated.

I have browsed StackOverflow and found a couple questions/answers that are close but not exact for my situation. I am following this example:

http://www.javascriptkit./javatutors/selectcontent2.shtml

And my JavaScript code is like this:

var cityList = document.selectionForm.cityListBox;
var cities = new Array();

cities[0] = "";
cities[1] = ["Eugene|eugeneValue", "Portland|portlandValue", "Salem|salemValue"];
cities[2] = ["Bellingham|bellinghamValue", "Onalaska|onalaskaValue", "Seattle|    seattleValue"];

function updateCities(cityGroup) 
{
    cityList.options.length = 0;

    if (cityGroup > 0)
    {
        for (i = 0; i < cities[cityGroup].length; i++)
        {
            cityList.options[cityList.options.length] = new Option(cities[cityGroup][i].split("|")[0], cities[cityGroup][i].split("|")[1]);
        }   
    }
}

And my HTML code like this:

<form name="selectionForm">
    <select name="stateListBox" size="3" style="width: 150px" onchange="updateCities(this.selectedIndex);">
        <option selected>Select a State >></option>
        <option value="oregon">Oregon</option>
        <option value="washington">Washington</option>
    </select>

    <select name="cityListBox" size="3" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
    </select>
</form>

As far as I can tell, this should work as described by the link above. I have had great experiences with the JavaScript Kit website, but this time I think I am missing something.

When I actually publish this to the page, I can click the states but nothing appears in the city box, as is expected.

Can anyone see the problem here?

Any help is appreciated.

PS - I apologize if there is a double post that I missed. Any references are also greatly appreciated.

• javascript
• html
• selectlist

• I am getting a "updateCities is not defined" error on jsFiddle investigating... – Chad Commented May 6, 2011 at 20:22
• Here is a simple working jQuery example (jsfiddle/Jaybles/FYVvP) – Dutchie432 Commented May 6, 2011 at 20:23
• @Chad, the error is thrown in jsFiddle because jsFiddle puts the script in a function and loads it on page load. Since updateCities is in a function, it has a local scope leading to error – sv_in Commented May 6, 2011 at 20:29

3 Answers 3

A more readable solution using jQuery, that doesn't require you to keep the two lists in sync (the states and cities are defined in a javascript data structure)

HTML:

<form name="selectionForm">
    <select name="states" id="states" size="3" style="width: 150px">
        <option selected>Select a State >></option>
    </select>

    <select name="cities" id="cities" size="3" style="width: 150px"></select>
</form>

javascript:

jQuery(function($) {
    initCities();

    function initCities() {
        var statesAndCities = {
            'Oregon': ['Eugene', 'Portland', 'Salem'],
            'Washington': ['Bellingham', 'Onalaska', 'Seattle']
        };

        //populate states
        $.each(statesAndCities,function(k,v){$('#states').append('<option>' + k + '</option>');});

        //populate cities
        $('#states').change(function(){
            var $cities = $('#cities');
            $cities.html("");
            var cities = statesAndCities[$(this).val()];
            $.each(cities,function(k,v){$cities.append('<option>' + v + '</option>');});
        });
    }

});

demo:

http://jsfiddle/82frv/1/

in the for loop in updateCities, the statement starts with citylist.options change citylist to cityList (Capital L)

Will work then.

Just two things:

• You need document.forms.selectionForm, the forms are within that collection

• The way the script is written, it must be placed in the page after the tag, because it tries to access it immediately

No other change is needed.