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

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

HTML

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

<select class="select" id='dropdownone'></select>
<select class="select" id='dropdowntwo'></select>
<select class="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>");    
    }
});

var number=['1'，'2'，'3'，'4'，'5']；
$。每个（数字、功能（键、值）{
如果（键==0）{
$（“#dropdownone”）.append（“+value+”）；
$（“#dropdowntwo”）.append（“+value+”）；
$（“#dropdowntThree”）.append（“+value+”）；
}否则如果（键==1）{
$（“#dropdownone”）.append（“+value+”）；
$（“#dropdowntThree”）.append（“+value+”）；
$（“#dropdowntwo”）.append（“+value+”）；
}否则如果（键==2）{
$（“#dropdownone”）.append（“+value+”）；
$（“#dropdowntwo”）.append（“+value+”）；
$（“#dropdowntThree”）.append（“+value+”）；
}否则{
$（“#dropdownone”）.append（“+value+”）；
$（“#dropdowntwo”）.append（“+value+”）；
$（“#dropdowntThree”）.append（“+value+”）；
}
});

注意：我需要函数在onchange事件中工作
例如
首次值选择如果从“#dropdownone”中选择值“one”，则不应在“#dropdowntwo”和“#dropdowntwo”中显示

one

值
第二次值选择如果从#dropdownone中选择了值'two'，则不应在#dropdowntwo'和#dropdownthree中显示值

two

。但两个下拉元素应显示先前选择的值“一”

---

第三次值选择如果再次从“dropdownone”中选择值“one”，则不应在“dropdowntwo”和“dropdowntwo”中显示值

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

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

var number=['1'，'2'，'3'，'4'，'5']；
var-htmlapend；
$。每个（数字、功能（键、值）{
htmlAppend+=''+值+''；
});
$（“#dropdownone，#dropdowntwo，#dropdowntwo”）.html（htmlapend）；
$（'#dropdownone'）。在（'change'，function（）上{
var thisKey=$（this.val（）；
$（“#dropdowntwo”）.html（htmlapend）；
$（“#dropdowntwo>选项[value='”+thisKey+']）。删除（）；
});

---

注意：如果这对您有效。。请告诉我更好地解释一下

编辑：@Mohamed Yousef的答案要好得多，还是用他的答案吧。

我想你是这个意思吧

---

您能否解释这一行

，但如果从列表中选择了其他值。以前选择的值将显示在其余的下拉列表中。

？是的，实际上我们从下拉列表中动态选择值。所以它总是被修改。这就是我提到的。@void如果你没有正确地理解这个问题，请问我。为什么你要用jquery插入

选项

？这里我用的是jquery。但我需要javascript或jquery的答案。在我们的演示中，如果我从

“#dropdownone”

中选择值'two'，则这两个下拉列表的其余部分不应显示该值元素。我不想删除该值，我只需要隐藏它。

console.clear(); // easy debugging
var chosen = {1: "one", 2: "two", 3: "three"};
$(".select").change(function(){
    var index = $(this).index() + 1;
    var value = $(this).val();
    var other = {};
    if(index === 1) { other = ["dropdowntwo", "dropdownthree"]; }
    if(index === 2) { other = ["dropdownone", "dropdownthree"]; }
    if(index === 3) { other = ["dropdownone", "dropdowntwo"]; }

    $.each(other, function(index, val){
        $(".select[id="+val+"] option").each(function(){
            if($(this).val() == value) {
                $(this).hide(); // <----- CHANGE THIS
            }
        });
    });
});
var numbers = ['one', 'two', 'three', 'four', 'five'];
$.each(numbers, function( key, value ) {
    if (key == 0) {
        $("#dropdownone").append("<option selected='selected' value='"+value+"'>"+value+"</option>");
        $("#dropdowntwo").append("<option value='"+value+"'>"+value+"</option>");
        $("#dropdownthree").append("<option value='"+value+"'>"+value+"</option>");

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