Как удалить элемент options, если он выбран в другом Select?

Question

[Froggie]

Вот решение, которое я хочу получить - https://jsfiddle.net/1zduav7s/
Но это angular, а как добиться того же на чистом JavaScript?

Answer 1

[Alex Khayev]

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)))
})

В данном примере накидал вам, чтобы элемент выбранный везде дисаблился. Дальше можете расширять функционал как нужно (удалять/восстанавливать айтемы, дисаблить только у всех остальных и пр.)