Как переупорядочить выпадающие списки на стороне клиента с помощью JavaScript, подобно очереди Netflix?

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

Например:

  1. Столбец А [1]
  2. Столбец Б [2]
  3. Столбец В [3]
  4. Столбец Г [4]
  5. Столбец Д [5]

Если изменить значение для Столбца Г на [2], то, соответственно, Столбец Б должен становится [3], Столбец В — [4] и так далее.

Мы можем решить этот вопрос серверной логикой, но хотелось бы узнать, как это можно реализовать на стороне клиента с использованием JavaScript. Может быть, кто-нибудь пробовал подобное и сможет поделиться своими наработками?

Да, это можно сделать на клиенте. Я бы создал массив с исходным порядком и функцию обновления. При изменении любого списка, функция собирает текущие значения, сортирует их и обновляет остальные списки. Ключевой момент - хранить начальный порядок отдельно. Получается быстро и без обращений к серверу. Могу поделиться примером кода, если нужно. Как думаешь, подойдет такой подход для твоей задачи?

Я решал похожую задачу недавно. Вот что сработало у меня: создал массив с начальным порядком столбцов, добавил обработчики change на все селекты. При изменении значения в одном списке, функция собирает текущие значения, сортирует их и обновляет остальные селекты. Ключевой момент - хранить исходный порядок отдельно. Получилось быстро и без обращений к серверу. Код компактный, около 30 строк. Если нужны детали реализации - дай знать.