从下拉列表中删除值

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 中删除第三个框中的名称：

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