JSFiddle - React, Tailwind, and code Playground
HTML
<select>
<option></option>
<option class="bob1">bob</option>
<option class="bill2">bill</option>
<option class="steve3">steve</option>
</select>
<select>
<option></option>
<option class="bob1">bob</option>
<option class="bill2">bill</option>
<option class="steve3">steve</option>
</select>
<select>
<option></option>
<option class="bob1">bob</option>
<option class="bill2">bill</option>
<option class="steve3">steve</option>
</select>
<select>
<option></option>
<option class="bob1">bob</option>
<option class="bill2">bill</option>
<option class="steve3">steve</option>
</select>
JavaScript
$(function() {
$("select").on("change", function() {
//reset to showing all the options
$("select option").show();
//for each selected option
$("select option:selected").each(function() {
var optionSelected = this;
var playerID = $(this).attr("class");
//hide the option in all the other dropdowns
$("option." + playerID).each(function() {
if(this != optionSelected) {
$(this).hide();
}
});
});
});
});