JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<h3>List 1</h3>
<select id="choice1" class="selectChoice">
  <option value="null">-- select --</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

<h3>List 2</h3>
<select id="choice2" class="selectChoice">
  <option value="null">-- select --</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>


<h3>List 3</h3>
<select id="choice3" class="selectChoice">
  <option value="null">-- select --</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

JavaScript

$(document).ready(function() {
  var selectState = {
    'choice1': 'null',
    'choice2': 'null',
    'choice3': 'null'
  };

  $('.selectChoice').change(function() {
    var selectId = $(this).attr('id');
    var selectedOptionValue = $(this).val();

    // for each other select element
    $('select[id!="' + selectId + '"]').each(function(index) {
      // enable the old option
      $(this).find('option[value="' + selectState[selectId] + '"]').removeAttr('disabled');

      if (selectedOptionValue !== 'null') { // if selected a real option
        // disable the new option
        $(this).find('option[value="' + selectedOptionValue + '"]').attr('disabled', 'disabled');
      }
    });

    selectState[selectId] = selectedOptionValue; // update the new state at the end
  });
});