创建两个依赖于第一个的下拉列表

Question

我正在创建三个下拉列表，其中包含我的html中的所有可能选项。但是，我需要在选择之前的选项时进行更改（隐藏并显示正确的选项）。我得到第二个与第一个绑在一起，我不能把第三个绑在里面。我怎么用这种相同风格的代码呢？

http://jsfiddle.net/cL2tt/115/

$(document).ready(function() {
    var optarray = $("#optthree").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#opttwo").change(function() {
        $("#optthree").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#optthree").html(addoptarr.join(''))
    }).change();
})

Answer 1

查看我对类似问题的回答，显示了两种不同的方式。

Changing the values in a <select> using another <select> using AJAX (PHP)