Question

目前，我有两个下拉列表，其中填充了用户的名字和姓氏。从第一个下拉列表中选择用户时，该名称在第二个下拉列表中不可用。

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

目前的代码可以在这里找到：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);

}

提前致谢。

Answer 1

看看这个小提琴http://jsfiddle.net/YHjuz/1/
它会让你有进一步的想法还有，你不能隐藏IE7中下拉列表的选项。

Answer 2

使用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中删除选项
先前选择的选项会添加回列表

Answer 3

这可能过于简单了，但我发现你似乎在改变最后一个下拉列表时试图保留所选的值并删除所有其他值，那么如何做到这一点：

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

或者，如果您尝试从方框A和方框B中删除第3个方框中的名称：

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

从下拉列表中删除值

3 个答案: