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

我正在创建三个下拉列表，其中包含html中所有可能的选项。但是，我需要在拾取之前的选项时更改它们（隐藏并显示正确的选项）。我把第二个和第一个绑在一起，我不能把第三个绑在一起。我如何使用相同样式的代码来实现这一点

$（文档）.ready（函数（）{
var optarray=$（“#optthree”）.children（'option'）.map（函数（）{
返回{
“价值”：这个价值，
“选项”：“+this.text+”
}
})
$（“#opttwo”）.change（函数（）{
$（“#optthree”）.children（'option'）.remove（）；
var addoptar=[]；
对于（i=0；i-1）{
addoptar.push（optarray[i].option）；
}
}
$（“#optthree”）.html（addoptar.join（“”））
}).change（）；
})

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

---

您的下拉列表中有相同的id。

$(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();
})