Как сделать, чтобы при выборе значения в одном select'е оно пропадало в других?

Question

[IgorPlays]

Есть несколько select'ов, например:

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Надо сделать так, чтобы при выборе одного значения в других селектах оно исчезло.

Answer 1

[0xD34F]

const selects = [...document.querySelectorAll('select')];
const onChange = () =>
  selects.forEach(function({ value, options: [...n] }) {
    n.forEach(m => m.hidden = this(m.value) && value !== m.value);
  }, Set.prototype.has.bind(new Set(selects.map(n => n.value))));

selects.forEach(n => n.addEventListener('change', onChange));

Comments

[IgorPlays]

Спасибо большое, если не сложно можно ссылку на форум - объяснение что и как это работает на будущее