Блог

В настоящее время у меня есть два выпадающих списка, которые заполнены именами и фамилиями пользователей. Когда пользователь выбирается из первого выпадающего списка, его имя недоступно во втором выпадающем списке.

Я хотел бы добавить третий выпадающий список, который делает недоступными значения, выбранные в первом и втором списках. Как я могу изменить свой текущий код для поддержки этой функции?

Текущий код можно найти здесь: 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);

}
  

Заранее спасибо.

Посмотрите на эту скрипку http://jsfiddle.net/YHjuz/1 /
Это подскажет вам, как действовать дальше.
И, к вашему сведению, вы не можете скрыть элемент опции выпадающего списка в IE7.

Чтобы сделать это с помощью jQuery (см. http://jsfiddle.net/NfTNA/38 /)

Пример разметки

 <label for="reviewer">Select 1<sup>st</sup> Reviewer:</label>
<br />
<select name="optionsA" id="optionsA">
    <option value="">amp;ndash; select amp;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="">amp;ndash; select amp;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="">amp;ndash; select amp;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

• ранее выбранные параметры добавляются обратно в списки

Это может быть упрощением, но я вижу, что вы, похоже, пытаетесь сохранить выбранное значение и удалить все остальные при изменении последнего выпадающего списка, так как насчет того, чтобы просто сделать это:

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

Или, если вы пытаетесь удалить имя в 3-м поле из полей A и B:

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