Question

这里我有三个下拉列表，每个列表包含相同数量的值。所以问题是如果值＆＃39;一个＆＃39;从＃drop;＃dropdownone＆＃39;中选择。它不应该显示价值＆＃39;一个＆＃39;对于其余的两个下拉菜单。如果从＆＃39;＃dropdowntwo＆＃39;中选择了一些值。它不应该显示其他两个元素列表的下拉列表中的值。＆＃39;＃dropdownthree＆＃39;的情况相同。但是如果从列表中选择其他值。之前选择的值将显示在其余的下拉列表中 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 事件
例如
第一次选择价值 ，如果值＆＃39;一个＆＃39;选自＆＃39; #dropdownone＆＃39;它不应该在＆＃39;＃dropdowntwo＆＃39;中显示one值。＆安培; ＆＃39;＃dropdownthree＆＃39 ;.
第二次选择值 ，如果值为＆＃39; 2＆＃39;选自＆＃39; #dropdownone＆＃39;它不应该在＆＃39;＃dropdowntwo＆＃39;中显示值two。＆安培; ＆＃39;＃dropdownthree＆＃39 ;.但是之前选择的价值是“一个人”。应显示两个下拉元素
第三次选择价值 如果再次重视价值＆＃39;一个＆＃39;选自＆＃39; #dropdownone＆＃39;它不应该显示在＆＃39;＃dropdowntwo＆＃39; ＆安培; ＆＃39;＃dropdownthree＆＃39 ;.

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

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

Answer 2

编辑：@ Mohamed-Yousef的回答更好，请与他一起去。

我假设你的意思是这个？

DEMO ＆lt; - 更新隐藏

<强> HTML

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

<强> JS

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

下拉值根据另一个下拉列表javascript进行过滤

2 个答案: