javascript - 基于另一个下拉 JavaScript 的下拉值过滤器

Question

这里我有三个下拉列表，每个列表都包含相同数量的值。所以问题是是否从“#dropdownone”中选择值“one”。对于两个下拉菜单的其余部分，它不应显示值“一”。此外，如果从“#dropdowntwo”中选择某个值，则它不应在其他两个元素列表的下拉列表中显示值。 '#dropdownthird' 的情况相同。但如果从列表中选择其他值。先前选择的值将显示在其余下拉列表中。
FIDDLE

HTML

<select id='dropdownone'></select>
<select id='dropdowntwo'></select>
<select id='dropdownthree'></select>

Javascript

var numbers = ['one', 'two', 'three', 'four', 'five'];
$.each(numbers, function( key, value ) {
    if (key == 0) {
        $("#dropdownone").append("<option selected='selected' value='"+key+"'>"+value+"</option>");
        $("#dropdowntwo").append("<option value='"+key+"'>"+value+"</option>");
        $("#dropdownthree").append("<option value='"+key+"'>"+value+"</option>");

    } else if (key == 1) {
        $("#dropdownone").append("<option value='"+key+"'>"+value+"</option>");
        $("#dropdownthree").append("<option value='"+key+"'>"+value+"</option>");
        $("#dropdowntwo").append("<option selected='selected' value='"+key+"'>"+value+"</option>");
    } else if (key == 2) {
        $("#dropdownone").append("<option value='"+key+"'>"+value+"</option>");
        $("#dropdowntwo").append("<option value='"+key+"'>"+value+"</option>");
        $("#dropdownthree").append("<option selected='selected' value='"+key+"'>"+value+"</option>");
    } else {
        $("#dropdownone").append("<option value='"+key+"'>"+value+"</option>");
        $("#dropdowntwo").append("<option value='"+key+"'>"+value+"</option>");
       $("#dropdownthree").append("<option value='"+key+"'>"+value+"</option>");    
    }
});

注意:我需要该功能在onchange事件中工作
例如
第一次值选择如果从“#dropdownone”中选择值“one”，则不应在“#dropdowntwo”中显示one值'#dropdownthird'。
第二次值选择如果从“#dropdownone”中选择值“two”，则不应在“#dropdowntwo”中显示值two & '#dropdownthird'。但之前选择的值“one”应该显示两个下拉元素
第三次值选择如果再次从“#dropdownone”中选择值“one”，则不应显示“#dropdowntwo”和“#dropdownthird”中的值。

Answer 1

您可以使用类似的方法，并为您需要的每个下拉菜单重复更改功能

var numbers = ['one', 'two', 'three', 'four', 'five'];
var htmlAppend;
$.each(numbers, function( key, value ) {
    htmlAppend += '<option value="'+key+'">'+value+'</option>';
});
$("#dropdownone, #dropdowntwo, #dropdownthree").html(htmlAppend);
$('#dropdownone').on('change',function(){
    var thisKey = $(this).val();
    $("#dropdowntwo").html(htmlAppend);
    $("#dropdowntwo > option[value='"+ thisKey +"']").remove();
});

DEMO

注意:如果这对你有用..请告诉我更好地解释