Синхронизация выбора в нескольких полях select

Question

Необходимо, чтобы при выборе в первом поле какого-либо пункта, аналогичный выбор происходил бы и в другом поле.

<form action="/src/mail.php" method="POST">
  <select name="sizes" id="size-select">
    <option class="white-red" value="xs-s">XS-S</option>
    <option class="white-red" value="m-xl">M-XL</option>
  </select>
  <select name="sizes" id="size-select">
    <option class="white-red" value="xs-s">XS-S</option>
    <option class="white-red" value="m-xl">M-XL</option>
  </select>
</form>

Answer 1

Если списки полностью идентичные, то задача решается просто - группировать нужные по имени класса, и проходясь по группе, присваивать текущий выбор.

В контексте вопроса, функция универсальна, то есть можно добавлять списки с соответствующей группировкой (для наглядности добавил несколько списков):

let aSelects = [...document.querySelectorAll('select')];

aSelects.forEach((el) => el.addEventListener('change', fDuplicationOfChoice));

function fDuplicationOfChoice(ev) {
  let target = ev.target;
  let aFilter = aSelects.filter((el) => {
    return el.classList[0] == target.classList[0] && el != target;
  });
  if (aFilter) {
    aFilter.forEach((el) => (el.selectedIndex = target.selectedIndex));
  }
}

<form action="/src/mail.php" method="POST">
  Type
  <select name="types" id="type-select" class="type-select">
    <option value="shoes">Shoes</option><option value="dress">Dress</option>
  </select><br><br>
  Size
  <select name="sizes" id="size-select" class="size-select">
    <option value="xs-s">XS-S</option><option value="m-xl">M-XL</option>
  </select>
  <select class="size-select">
    <option value="xs-s">XS-S</option><option value="m-xl">M-XL</option>
  </select><br><br>
  Color
  <select name="colors" id="color-select" class="color-select">
    <option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option>
  </select>
  <select class="color-select">
    <option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option>
  </select>
  <select class="color-select">
    <option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option>
  </select>
</form>

Группировка по имени класса, лишь для примера. Правильнее будет группировать по data-атрибутам, а атрибут class оставить для других целей.

БЛОГ НА HUSL

Синхронизация выбора в нескольких полях select

Ответы (1 шт):