Как синхронизовать два списка на странице с помощью JavaScript'a?

Question

[Станислав Гордиенко]

Привет, на странице есть два выпадающих списка (размер и цвет). Когда пользователь выбирает из первого списка, например 42 размер, то выпадающий список надо обновить и показать только те цвета, которые есть для этого размера. Так бывает, что не все цвета могут быть для того или иного размера. Есть примеры, как это реализовать? И какую структуру для хранения этих данных выбрать? Я хочу, чтобы этот массив данных сразу формировался на сервере и передавался на клиент, чтобы потом не делать запросы на сервер каждый раз, когда будут выбираться значения из выпадающих списков. Мы не используем никакие фреймворки, только jQuery.

Answer 1

[Aves]

Данные хранить можно в массиве

const data = [
  [42, 'red'],
  [44, 'red'],
  [42, 'green'],
  [44, 'green'],
  [46, 'green'],
  [42, 'blue'],
  [46, 'blue']
];

При выборе получать список подходящие значения примерно так:

data.reduce((s, [size, color]) => {
  if (size == selectedSize) s.add(color);  
  return s;
}, new Set());

Набросал пример, вместо удаления option сделал просто с использованием атрибута disabled.

Comments

[Станислав Гордиенко]

Спасибо за решение. Я все же буду использовать дикшинари так как мне надо будет хранить информацию по количеству на складе и стоимость.

[Aves]

Станислав Гордиенко: ну массив удобнее фильтровать. А цену и остаток можно хранить так же как и размер и цвет -

const [size, color, price, count] = [42, 'red', 9.99, 250]

Answer 2

[xmoonlight]

Два объекта кросс-связей (для более сложных нужно строить "деревья"):

var sizes = {42: ["Красный", "Синий"], 43:["Зелёный","Синий"]}
var colors = {"Красный": [42], "Синий":[42,43], "Зелёный":[43]}

Answer 3

[Anton Bobylev]

Отношение размер-цвет передавайте в виде объекта:

var data = {"42": ["Красный", "Синий", "Зеленый"], "43": ["Желтый", "Белый"]};

При изменении состояния первого списка загружайте второй значениями из соответствующего массива.

Comments

[Станислав Гордиенко]

Anton Bobylev а если пользователь начнет выбирать сначала цвет, а потом размер?

[Станислав Гордиенко]

Допустим, он выберет зеленый цвет, и нам надо отобразить все возможные размеры, которые содержат зеленый цвет. Я забыл дописать, что для каждой пары еще есть цена и количество на складе.

[Anton Bobylev]

Станислав Гордиенко: Тогда передавайте два объекта и перегружайте первый список соответственно.

[Anton Bobylev]

Посмотрите в сторону lodash. Передавайте коллекцию объектов/моделей и делайте выборку по нужным характеристикам с помощью where.

[Станислав Гордиенко]

Anton Bobylev Спасибо за подсказку, отличная библиотека. Я нашел парочку методов, которые мне подходят, буду экспериментировать.