Заполнение одного раскрывающегося списка на основе выбора в другом с помощью JavaScript

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

Чтобы проиллюстрировать этот подход, рассмотрим сценарий, в котором у вас есть два раскрывающихся списка: раскрывающийся список A с такими параметрами, как «Цвета», « Фигуры», «Имена» и раскрывающийся список B. Мы хотим заполнить параметры в раскрывающемся списке B на основе выбора, сделанного в раскрывающемся списке A.

Пример кода

Следующая функция JavaScript демонстрирует, как достичь этой функциональности:

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 
HTML-разметка
Следующая HTML-разметка включает два раскрывающихся списка:
ColoursShapesNames
Использование
Чтобы использовать эту функцию, просто вызовите функцию configureDropDownLists, передав первый раскрывающийся список (ddl1) и второй раскрывающийся список (ddl2) в качестве аргументов. Функция будет обрабатывать динамическое заполнение раскрывающегося списка B на основе выбора, сделанного в раскрывающемся списке A.
Этот фрагмент кода демонстрирует полное рабочее решение, позволяющее динамически заполнять один раскрывающийся список на основе выбора, сделанного в другом, с помощью JavaScript. , без необходимости вызовов базы данных или запросов AJAX.