Jquery - несколько выпадающих списков, отключить выбранную запись в других списках

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

Но если он не выбран, то мне нужно, чтобы он был доступен в других списках.

Пока у меня есть:

$('#frm1').on('change', 'select[name="dropdown"]', function (event) {   

    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').attr('disabled','disabled');

});

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

Это скрипка, показывающая, что у меня есть.

Любые идеи Спасибо


dropdown jquery select
person Tom    schedule 14.10.2019    source источник
comment
Пожалуйста, включите свой html   -  person Carsten Løvbo Andersen    schedule 14.10.2019
comment
ссылка на скрипку добавлена ​​в исходное сообщение.   -  person Tom    schedule 14.10.2019
comment
Если выбор параметра должен очистить любой предыдущий отключенный эффект, добавьте команду для выбора всех параметров и очистки отключенного значения в качестве первой строки в обработчике событий. Что-то вроде $('.dropdown.option').attr('disabled',''); - обратите внимание, я не тестировал этот селектор, но он должен быть близок.   -  person Vanquished Wombat    schedule 14.10.2019
comment
Вопросы по отладке (почему этот код не работает?) должны включать желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения в самом вопросе.   -  person Pete    schedule 14.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вы хотите что-то вроде этого:

$(function() {
  $('#frm1').on('change', 'select[name="dropdown"]', function(event) {
    $('.dropdown option').removeAttr('disabled');
    $('.dropdown').each(function() {
      var v = $(this).val();
      if (v != "") {
        $('.dropdown').not(this).find("option[value='" + v + "']").attr("disabled", "disabled");
      }
    });
  });
});

Демо

$(function() {
  $('#frm1').on('change', 'select[name="dropdown"]', function(event) {
    $('.dropdown option').removeAttr('disabled');
    $('.dropdown').each(function() {
      var v = $(this).val();
      if (v != "") {
        $('.dropdown').not(this).find("option[value='" + v + "']").attr("disabled", "disabled");
      }
    });
  });
});
select {
  margin: 0.5em 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='frm1'>

  <select name="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <select name="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <select name="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <select class="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>

</form>

person Carsten Løvbo Andersen    schedule 14.10.2019
comment
Спасибо - это именно то, что мне нужно. - person Tom; 21.10.2019