从下拉列表中删除值

问题描述：

目前，我有两个下拉列表，填入用户的名和姓。从第一个下拉列表中选择用户时，该名称在第二个下拉列表中不可用。从下拉列表中删除值

我想添加第三个下拉列表，使第一个和第二个列表中选定的值不可用。我如何修改当前的代码以支持此功能？

当前的代码可以在这里找到：提前http://jsfiddle.net/NfTNA/

function removeOptions(selectA,selectB,selectC) { 
    var firstValue = $(selectA).children(":selected").attr("value"); 
    var secondValue = $(selectB).children(":selected").attr("value"); 
    var thirdValue = $(selectC).children(":selected").attr("value"); 
    // get the other element from the hidden select to put back 
    var prior = $("#hiddenContainer").children("[value!="+secondValue+"]").data("prior"); 
    if (prior != undefined) { 
     $("#hiddenContainer").children("[value!=" + secondValue + "]").insertAfter($(selectB).children("[value=" + prior.prior + "]")); 
    } 
    if (firstValue != 0) { 
     // add the prior id data to the element before removing it 
     var priorValue = $(selectB).children("[value="+firstValue+"]").prev().attr("value"); 
     $(selectB).children("[value="+firstValue+"]").data("prior",{prior:priorValue}); 

     // move the selected element of selectA in selectB to hidden select 
     $(selectB).children("[value="+firstValue+"]").appendTo("#hiddenContainer"); 
    } 
    // reselect the option in the secondary select 
    $(selectB).val(secondValue); 

}

感谢。

澄清 - 第一个和第二个下拉列表中包含名称列表。当您从第一个列表中选择一个名称时，它将从第二个列表中删除。第三个列表会发生什么？ – glosrob

在第一个和第二个列表中选择的名称将不会在第三个列表中可用。 – aparker81

另一个问题，我可以看作是glosrob的问题的插件 - 如果用户第一次选择第三个下拉或第二个下拉菜单发生了什么？或者是仅当用户在第一个下拉菜单上进行选择时才启用第二个下拉菜单？ – Gjohn

答

要使用jQuery做到这一点（见http://jsfiddle.net/NfTNA/38/）

实施例的标记

<label for="reviewer">Select 1<sup>st</sup> Reviewer:</label> 
<br /> 
<select name="optionsA" id="optionsA"> 
    <option value="">&ndash; select &ndash;</option> 
    <option value="jsmith">Smith, John (jsmith)</option> 
    <option value="bwright">Wright, Bob (bwright)</option> 
</select> 
<br /> 
<label for="reviewer">Select 2<sup>nd</sup> Reviewer:</label> 
<br/> 
<select name="optionsB" id="optionsB"> 
    <option value="">&ndash; select &ndash;</option> 
    <option value="jsmith">Smith, John (jsmith)</option> 
    <option value="bwright">Wright, Bob (bwright)</option> 
</select> 
<br /> 
<label for="reviewer">Select 3<sup>rd</sup> Reviewer:</label> 
<br/> 
<select name="optionsC" id="optionsC"> 
    <option value="">&ndash; select &ndash;</option> 
    <option value="jsmith">Smith, John (jsmith)</option> 
    <option value="bwright">Wright, Bob (bwright)</option> 
</select>

jQuery的

var firstSelected = null; 
var secondSelected = null; 

//initally order select lists (this is a bit of cheat, to help later on 

$('#optionsA').change(function() { 
    //remove the currently selected option from 2nd/3rd drop down 
    var selectedValue = $('#optionsA option:selected') 
    if (selectedValue.val() != "") { 
     $('#optionsB option[value="' + selectedValue.val() + '"]').remove(); 
     $('#optionsC option[value="' + selectedValue.val() + '"]').remove(); 
    } 
    else { 
     selectedValue = null; 
    } 

    //add previous item back in to 2nd/3rd drop down 
    if (firstSelected != null) { 
     $('#optionsB').append($('<option>', { value : firstSelected.val() }).text(firstSelected.text())); 
     $('#optionsC').append($('<option>', { value : firstSelected.val() }).text(firstSelected.text())); 
    } 

    //save the currently selected value 
    firstSelected = selectedValue; 
}); 

$('#optionsB').change(function() { 
    //remove the currently selected option from 1st/3rd drop down 
    var selectedValue = $('#optionsB option:selected') 
    if (selectedValue.val() != "") { 
     $('#optionsA option[value="' + selectedValue.val() + '"]').remove(); 
     $('#optionsC option[value="' + selectedValue.val() + '"]').remove(); 
    } 
    else { 
     selectedValue = null; 
    } 

    //add previous item back in to 1st/3rd drop down 
    if (secondSelected != null) { 
     $('#optionsA').append($('<option>', { value : secondSelected.val() }).text(secondSelected.text())); 
     $('#optionsC').append($('<option>', { value : firstSelected.val() }).text(firstSelected.text())); 
    } 

    //save the currently selected value 
    secondSelected = selectedValue; 
});

这是基于以下几点：

选择从选择列表中1的一个选项，将删除选择列表2和3
选项选择从选择列表2的选项，从选择列表1删除选项和3个
先前选择的选项被添加回列表

如果第二个下拉列表中的值发生更改，他可能需要返回该值。 – Exception

正确，当前代码按需要工作，只需将其附加到允许第三个相关下拉列表中。 – aparker81

在我的防守中，这是一个非常重要的错过要求！你的jsFiddle只显示2个下拉菜单？这与你的问题如何结合？ – glosrob

答

看看这个小提琴http://jsfiddle.net/YHjuz/1/
它会给你的想法进一步进行。
而仅供参考，您不能隐藏IE7下拉列表中的选项。

这也是一个很好的例子。接受的解决方案提供了我想要的;不过，我会记住你的建议和建议。谢谢。 – aparker81

答

这可能是过于简单化了，但我看到你似乎在试图保持选择的值，并改变过去的下拉列表中，当去除所有其他人，所以如何只这样做：

$(document).ready(function() { 
    $('#optionsC').change(function() { 
     $('#selectA').find('option:not(:selected)').remove(); 
     $('#selectB').find('option:not(:selected)').remove(); 
    }); 
});

或者如果你是试图从框A和框B中删除第三个框中的名称：

$('#optionsC').change(function() { 
    var selectedValue = $(this).val(); 
    if (selectedValue != "") { 
     $('#optionsA option[value="' + selectedValue + '"]').remove(); 
     $('#optionsB option[value="' + selectedValue + '"]').remove(); 
    } 
});

从下拉列表中删除值

相关推荐