JSFiddle - React, Tailwind, and code Playground
HTML
<select id="s1">
<option value="" selected="selected">Select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>//two
<select id="s2">
<option value="" selected="selected">Select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
JavaScript
$(document).ready(function (e) {
var $selects = $('select');
$selects.change(function () {
var value = $(this).val();
if (value == "") {
return false;
}
$selects.not(this).each(function () {
$('option', this).each(function () {
var sel = $(this).val();
if (sel == value) {
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
});
}).change(); // Trigger once to add options at load of first
});