JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<select name="dropdown1" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="dropdown2" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="dropdown3" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="dropdown4" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

JavaScript

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
  $dropdown2.find('option').prop("disabled", false);
  var selectedItem = $(this).val();
  if (selectedItem) {
    $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    else {
      $dropdown1.find('option[value="' + selectedItem + '"]').prop("disabled", false);
    }

  }
});