To disable already selected options (except the default “Select”) from other selects you can do the following: Select all selected options, iterate through all select fields and remove the attribute “disabled” from every option, then iterate through all selected options and set this option to “disabled” for all selects except the select field that has this value as selected option.
$("select").on("change", function() {
let selected = $("select option:selected");
let selects = $("select");
selects.each(function() {
let that = $(this);
$(this).find("option").each(function() {
$(this).removeAttr("disabled");
});
selected.each(function() {
if (that.val() !== $(this).val() && $(this).val() !== "0") {
that.find("option[value=" + $(this).val() + "]").attr("disabled", true);
}
});
});
});div {
padding:10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select>
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<select>
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<select>
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<select>
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>