Заполнение раскрывающихся списков на основе выбора

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

Один из подходов к достижению этой функциональности включает использование JavaScript для динамического обновления содержимого зависимого раскрывающегося списка. Вот пример, демонстрирующий, как заполнить один раскрывающийся список (B) на основе выбора в другом (A):

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
Эта функция JavaScript принимает два параметра: ddl1 и ddl2, которые представляют два раскрывающихся списка. Сначала он инициализирует массивы с параметрами, которые будут отображаться в каждом раскрывающемся списке.
Затем используется оператор переключения для обработки выбора, сделанного в ddl1. В зависимости от значения ddl1 он очищает параметры в ddl2 и заполняет его соответствующими параметрами. Функция createOption используется для создания и добавления каждого параметра в ddl2.
В HTML необходимо определить два раскрывающихся списка:

  
  Colours
  Shapes
  Names



Когда пользователь выбирает параметр в ddl1, событие onchange запускает функцию configureDropDownLists, которая соответствующим образом обновляет параметры в ddl2. Этот подход обеспечивает удобный способ заполнения одного раскрывающегося списка на основе выбора в другом, что повышает удобство использования форм.