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

Question

[Павел]

У каждого работника свой уникальный value, но не пойму как этим воспользоватся, если работник выбран в первом списке, как запретить выбрать его повторно во втором?

Comments

[Дмитрий]

В вашем примере один и тот же работник имеет разные value в разных списках. В любом случае вы можете через атрибут hidden в тэге option скрывать выбранного ранее сотрудника.

[Павел]

Дмитрий, да я немного сглупил , код выглядит вот так

<select name="name1" class="rabotniki" multiple>
<option value="1">Иванов И.И.</option>
<option value="2">Порошенко</option>
<option value="3">Пхпстормов</option>
<option value="4">Путин</option>
</select>

<select name="name2" class="rabotniki" multiple>
<option value="1">Иванов И.И.</option>
<option value="2">Порошенко</option>
<option value="3">Пхпстормов</option>
<option value="4">Путин</option>
</select>

что конкретно надо сделать или куда копать? Я не совсем понял

[Павел]

Дмитрий, нашел такой код для одного выделения jsfiddle.net/jFMhP , но мне надо для multiple

[Дмитрий]

При изменении выделения в одном списке проходитесь по элементам другого и с помощью установки атрибута hidden скрываете выбранные в другом списке элементы.

Answer 1

[0xD34F]

const $select = $('select').change(function() {
  const selected = $(':selected', this).get().map(n => n.value);
  const disabled = $(':disabled', this).get().map(n => n.value);

  $select
    .not(this)
    .find('option')
    .prop('disabled', function(i, val) {
      return disabled.includes(this.value) ? val : selected.includes(this.value);
    });
});

или

const selects = [...document.querySelectorAll('select')];
selects.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  const options = [...this];
  const selected = options.filter(n => n.selected).map(n => n.value);
  const disabled = options.filter(n => n.disabled).map(n => n.value);

  for (const n of selects.flatMap(m => m === this ? [] : [...m])) {
    n.disabled = disabled.includes(n.value) ? n.disabled : selected.includes(n.value);
  }
}

Answer 2

[Kolejium]

Только JS. Создай 2 массива. В первом массиве пусть хранятся все value. Во втором только выбранные. А дальше в select заноси, те который не встречаются во втором массиве.

Comments

[Павел]

не особо я силен в этом , может есть пример ?