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

Question

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

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

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

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

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

});

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

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

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

Answer 1

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

$(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>