Отключить / включить опции для нескольких вариантов выбора в соответствии с их значением / выбрано / не выбрано

Question

желаемый результат:

• 4 выпадающих списка, в каждом из которых 6 одинаковых вариантов выбора.
• Когда опция выбрана, она отключается в 3 других выпадающих списках.
• Кроме того, когда параметр изменяется, он становится доступным в 3 других раскрывающихся списках выбора.
• Этот же шаблон должен работать на всех 4 выборках.

HTML:

<td class="formLabelHolder"><label for="field1174">Label</label></td>
<td class="formFieldHolder"><span><select name="field1" class="formSelect" id="field1">
<option selected="selected"></option>
<option>Large Format Solutions</option>
<option>Advanced Large Format Solutions</option>
<option>Scanning Solutions</option>
<option>Advanced Scanning Solutions</option>
<option>Office Imaging</option>
<option>Projectors Solutions</option>
</select>
</span></td>

Я пытаюсь решить эту проблему с помощью jQuery, а вот код:

$(document).ready(function(){
    var select = $('#form-221 select :selected');


$('#form-221 select').change(function() {

        var value = $(this).val();
    var index = $('#form-221 select').index(this);


        $('#form-221 select option').each(function() {

    //  $(this).removeAttr('disabled');

            if ( $(this).val() == value ) {
                    $(this).attr('disabled', true);
            }
        if ( $(this).val() == select[index] ) {
                    $(this).attr('disabled', false);
            }
            });

//  console.log($(':selected', select.parent('select')[index]).val());  

    select = $('#form-221 select :selected');

    });
});

Я тоже пробовал это:

 $(document).ready(function(){



$('#form-221 select').change(function() {

        var value = $(this).val();



        $('#form-221 select option').each(function() {

        $(this).removeAttr('disabled');

            if ( $(this).val() == value ) {
                    $(this).attr('disabled', true);
            }

            });
    });
});

Но это приводит только к последнему измененному выбору.

Верхний код работает (если вы убираете первое «если») на полпути, он полностью отключает выбор, но при изменении выбора не активирует его.

Я, должно быть, делаю что-то не так, и я пытаюсь понять это, пока мы говорим;) Если я найду ответ, я вставлю это и здесь:)

Если у кого-то есть другой способ приблизиться к этому, пожалуйста, дайте мне знать! Я стремлюсь найти ответ / решение:)

Я нашел другой вопрос о чем-то подобном, но он работает только для 2 выборов, я попытался;)

Answer 1

Одним из решений было бы сохранение всех выбранных значений в массиве при каждом изменении, а затем проверка каждой доступной опции, хранится ли ее значение в этом массиве:

$('select').change(function() {

  var selections = [];
  $('select option:selected').each(function(){
    if($(this).val())
        selections.push($(this).val());
  })
  $('select option').each(function() {
     $(this).attr('disabled', $.inArray($(this).val(),selections)>-1 && !$(this).is(":selected"));
  });
});

См. Пример здесь: http://jsfiddle.net/398Sj/

Answer 2

После некоторого возни с jsFiddle я закончил с этим:

var selects = $("select"),
    options = selects.find("option");

selects.change(function(){
    options.removeAttr("disabled");
    selects.each(function(){
        var idx = $(this).find("option:selected").index(),
            otherSelects = selects.not(this);
        if (idx != null) {
            otherSelects.find("option:eq("+idx+")").attr("disabled", "disabled");
        }
    });
});

Я также пытался использовать селектор :contains, но он не работал должным образом. Вышеприведенный код использует вместо этого индексы и работает, пока параметры находятся в одном и том же порядке (т. Е. Имеют одинаковый индекс) в элементе select.

Я бы порекомендовал установить уникальный атрибут value (возможно, внутренний идентификатор?) Для каждой опции и выбирать на основе этого. Тогда не имеет значения, в каком порядке они находятся внутри элемента select.

Обратите внимание, что хотя атрибут disabled для элемента option указан в спецификациях HTML4 / 5, все версии IE до 8 не поддерживают. Ссылка: MSDN и Dottoro