javascript - 创建2级相互依存的选择列表

我浏览了StackOverflow，发现了一些很接近但不适合我的情况的问题/答案。我正在关注以下示例:

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

我的JavaScript代码是这样的:

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

我的HTML代码是这样的:

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

据我所知，这应该如上面的链接所述。我在JavaScript Kit网站上有丰富的经验，但是这次我想我缺少了一些东西。

当我将其实际发布到页面上时，我可以单击州，但是如预期的那样，城市框中没有任何内容。

有人可以在这里看到问题吗？

任何帮助表示赞赏。

附注-如果您错过了一篇双重帖子，我深表歉意。任何引用资料也将不胜感激。

最佳答案

在updateCities的for循环中，该语句以citylist.options开头
将citylist更改为cityList(大写L)

然后会工作。