Question

我浏览过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网站上有过很棒的经历，但这次我觉得我错过了一些东西。

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

有人能在这看到问题吗？

感谢任何帮助。

PS - 如果我错过了双重帖，我道歉。任何参考文献也非常感谢。

Answer 1

使用jQuery的更易读的解决方案，不要求你保持两个列表同步（状态和城市在javascript数据结构中定义）

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

});

演示：

http://jsfiddle.net/82frv/1/

Answer 2

在updateCities的for循环中，语句以citylist.options开头将citylist更改为cityList（资本L）

然后会工作。

Answer 3

只有两件事：

您需要document.forms.selectionForm，表单在该集合中
编写脚本的方式，必须将其放在标记之后的页面中，因为它会立即尝试访问它

无需进行其他更改。

创建2级相互依赖的选择列表

3 个答案: