Jquery - multiple dropdown lists, disable selected entry in other lists

Question

I've got multiple dropdown lists, when I select an entry in one I want it to be disabled in other so it can't be selected.

But if it is deselected, then I need it available in the other lists.

So far I've got:

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

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

});

Which does disable a selected entry in other lists, but I can't see how to revert that if it's de selected.

This is a fiddle showing what I've got so far.

Any ideas Thanks

Answer 1

I think you want something like this:

$(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");
      }
    });
  });
});

Demo

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