Опция jQuery <select>отключена, если выбрана в других <select>

Question

Я пытаюсь отключить опцию, если она выбрана в любом из вариантов выбора

Так, например, если name = "select1" выбрал опцию "Тест 2", тогда я хочу "Тест 2"быть отключенным в обоих операторах выбора ... и если что-то еще будет проверено, чтобы он снова включил предыдущую опцию.

Я написал здесь пример сценария, к которому я думал, что я получу" близко "... но это поставило меня далеко отсюда.Любая помощь будет оценена.

<script type="text/javascript">
$(document).ready(function(){
 $("select").change(function() {
  $("select").find("option:selected").attr('disabled', true);
 });
});
</script>

<select name="select1">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<select name="select2">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

Answer 1

Демо: http://jsfiddle.net/dZqEu/

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

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

    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });

});

---

Вы можете предпочесть эту версию кода:

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

    $(this)
        .siblings('select')
        .children('option[value=' + this.value + ']')
        .attr('disabled', true)
        .siblings().removeAttr('disabled');

});

Демонстрационная версия: http://jsfiddle.net/dZqEu/2/

Обратите внимание, что эта вторая версия содержит одну строку (одну строку кода), но я отформатировал ее, чтобы она была более читабельной. Мне больше нравится эта вторая версия.

---

Также обратите внимание, что в моем коде предполагается, что эти два поля SELECT являются родственными элементами DOM. Если это не ваш случай, то этот код - $(this).siblings('select') - не будет работать для вас, и вам придется использовать методы обхода jQuery, чтобы перейти к другому полю SELECT.

В наихудшем сценарии - когда блоки SELECT находятся далеко друг от друга в дереве DOM и обход не будет эффективным - вы можете просто присвоить им атрибуты ID и использовать этот код для выбора другого поля:

$('#select1, #select2').not(this)

Демонстрационная версия: http://jsfiddle.net/dZqEu/3/

Answer 2

Попробуйте это:

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
}); 

Если вы хотите включить ранее отключенную опцию (когда значение не выбрано из другой комбинации), используйте эту расширенную версию:

$(document).ready(function () {
    $("select").change(function () {
        var $this = $(this);
        var prevVal = $this.data("prev");
        var otherSelects = $("select").not(this);
        otherSelects.find("option[value=" + $(this).val() + "]").attr('disabled', true);
        if (prevVal) {
            otherSelects.find("option[value=" + prevVal + "]").attr('disabled', false);
        }

        $this.data("prev", $this.val());
    });
});

Answer 3

Если у вас более 2, выберите:

$('select').on('change', function() {
    $('select option').removeAttr('disabled');
    $('select').each(function(i, elt) {
        $('select').not(this).find('option[value="'+$(elt).val()+'"]').attr('disabled', true);
    });
});

Answer 4

Проблема с вашим кодом заключается в том, что в подпрограмме change() вы смотрите на все варианты выбора, а не на тот, который изменился, и отключаете все выбранные записи.Вам нужно найти значение выбранной записи, о которой идет речь, и отключить ее в прочее , а не текущее.

Нечто подобное может пригодиться [не проверено]:

$(document).ready(function() {
  $("select").each(function(cSelect) {
    $(this).data('stored-value', $(this).val());
  });

  $("select").change(function() {
    var cSelected = $(this).val();
    var cPrevious = $(this).data('stored-value');
    $(this).data('stored-value', cSelected);

    var otherSelects = $("select").not(this);

    otherSelects.find('option[value=' + cPrevious + ']').removeAttr('disabled');
    otherSelects.find('option[value=' + cSelected + ']').attr('disabled', 'disabled');
  });
});

Бит stored-value позволяет узнать, какие параметры необходимо включить в других полях <select>.