htmL
<select class="myselect" name="select1">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
<select class="myselect" name="select2">
<option value="2" selected>two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
<select class="myselect" name="select3">
<option value="1">one</option>
<option value="3" selected>three</option>
<option value="5">five</option>
<option value="6">six</option>
</select>
JAVASCRIPT
const check = (selects, event) => {
const selected = new Set([event.target.value])
selects.forEach(el => selected.add(el.value));
selects.forEach(forRemoved => {
const options = forRemoved.querySelectorAll(`option`)
options.forEach(option => {
option.disabled = selected.has(option.value);
})
})
}
document.addEventListener("DOMContentLoaded", () => {
const selects = document.querySelectorAll(".myselect");
selects.forEach(select => select.addEventListener("change", e => check(selects, e)))
})
В данном примере накидал вам, чтобы элемент выбранный везде дисаблился. Дальше можете расширять функционал как нужно (удалять/восстанавливать айтемы, дисаблить только у всех остальных и пр.)