Динамическое создание выпадающих связанных списков select

DOM + javascript порою позволяют создавать удивительные вещи. Одна из этих вещей, которой я хочу с вами поделиться — это динамически формируемые выпадающие списки.

Постановка задачи

Так как я по сути практик, то лучше сразу рассмотреть практическую задачу. Допустим, требуется создать форму выбора модели картриджа принтера. При этом, сначала пользователь может выбрать брендовое название или производителя, а потом уже ограниченный первым выбором — конкретную модель картриджа. В итоге это определяет, например, стоимость услуги связанной с данным картриджем.

Итак, наша задача отталкивается от работы с некоторой таблицей. При формировании массива данных из php удобно пользоваться библиотекой json. А в конечных движках для этих целей бывают реализованы собственные встроенные средства. Например, Drupal имеет функцию drupal_to_js($variable). Не стану вдаваться в подробности json и конкретных движков, будем считать, что нам удалось объявить прайс как двумерный ассоциативный массив в javasctipt. Выглядит это примерно так:

После этого нам понадобятся два списка select, в которых мы и будем отображать наши списки динамически. Вот HTML код этих списков.

Обратите внимание, что списки уже содержат по одному элементу option. Второй список изначально скрыт от пользователя установкой стиля контейнера display = none. Мы будем также прятать список моделей, если бренд не выбран.

Вернемся к данным прайса. В каждой строке у нас есть — наименование бренда (firm), модель устройства (device), совместимый с устройством картридж (cart) и цена заправки в рублях (p). Для первого списка нам нужно выбрать не повторяющиеся названия брендов, а для второго использовать название устройства или название картриджа. Чтобы за один проход выбрать из прайса не повторяющиеся названия брендов, лучше всего позаботиться при формировании массива, чтобы строки были отсортированы по firm. Тогда можно написать такую функцию инициализации первого списка:

Для создания новых элементов списка мы используем конструктор Option(text, value), где text — это отображаемая метка элемента списка, а value — её значение. Сортированный по firm массив позволяет нам последовательно выбрать значения бредов и добавить их в список.

Далее нам нужно будет создавать и показывать список картриджей. Этот функционал привяжем к событию onchange первого списка. Но перед тем как добавить нужные элементы в список, его нужно очистить. Вот что получается:

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

Я позволил себе небольшую оптимизацию для данной функции, передавая в неё как входной параметр ссылку на второй список. Давайте посмотрим как все выглядит вместе (без объявления прайса).

HTML часть:

javascript часть:

Ну и для демонстрации — примерчик в живую:

Выберите бренд:

Написать комментарий

Мало букафф? Читайте есчо !

Автомасштабирование изображений

Сентябрь 16, 2015 г.

Сейчас очень модными стали адаптивные версии дизайна, которые умеют подстраиваются под размер экрана устройства, на котором открыли сайт. Столбцы (сайдбары, ...

Читать

Contact Form 7 - добавим галочку на согласие по обработке персональных данных

Июль 21, 2017 г.

Вступившие в силу поправки (с 01.07.2017) федерального закона ФЗ 152 "О защите персональных данных" требуют, чтобы владельцы сайтов информировали пользователя ...

Читать

 

Комментарии к «Динамическое создание выпадающих связанных списков select»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Динамическое создание выпадающих связанных списков select”

  1. Андрей:

    А как сделать, чтобы в конце скрипт выводил не цену, а была ссылка на файл, который нужно скачать?

  2. Рустам:

    Хороший примерчик, но у меня на сайте (под JOOMLa) при смене бренда не меняется модели… остаются теже что и при первом выборе… А если выбрать в бренда вы не выбрали бренд, и снова выбрать кокой нить бренд, то модели вообще больше не появляются))) В чем может быть проблема??

    • Попробуйте использовать какой-либо отладчик, чтобы найти в чем проблема. Судя по описанию, скрипт частично функционален, тут может быть «виноват» и браузер и какие то настройки браузера.

  3. Рустам:

    твой же пример работает))) Я с этим же браузером проверяю свой, и нифига) какой отладчик то примерно можно попробовать??? У меня такое оощущение что скрипт только при первом нажатии срабатывает, а при последующих выборах почему то нет…

  4. Рустам:

    выберите рубрику: куплюпродамсдам в арендувозьму в аренду
    тип недвижимости:
    —тип недвижимости не выбран—

    подтип недвижимости:

    —подтип недвижимости не выбран—

    var Data = [{ \»tip\»: \»Жилая недвижимость\», \»pod_tip\»: \»Комната\» },
    { \»tip\»: \»Жилая недвижимость\», \»pod_tip\»: \»1-комнатная квартира\» },
    { \»tip\»: \»Жилая недвижимость\», \»pod_tip\»: \»2-х комнатная квартира\» },
    { \»tip\»: \»Коммерческая недвижимость\», \»pod_tip\»: \»офис\» },
    { \»tip\»: \»Коммерческая недвижимость\», \»pod_tip\»: \»торговая площадка\» }];
    function tip_init() {
    var tipSelObj = document.getElementById(\’tip\’);
    var Len = Data.length;
    var selLen = tipSelObj.options.length;
    var lastTip = \»\»;
    for (var i=0; i 0; i—) devElm.remove(i);
    var Len = Data.length;
    var selLen = podtipSelObj.options.length;
    for (var i=0; i < Len; i++) {
    var t = Data[i];
    if (currentTip == t.tip)
    podtipSelObj.options[selLen ++] = new Option(t.pod_tip,t.pod_tip);
    }
    podtipContainer.style.display = \"block\"; //бренд выбран, покажем список
    }
    }
    tip_init();

    Вот код, вроде все правильно… но не работает

    • podtipSelObj — не определен, судя по коду. Ну и сложно что то комментировать дальше. Зачем дважды Len, selLen объявляются? Где инициализация currentTip? Много вопросов возникает.

  5. Рустам:

    У тя ошибка)))) вместо devElm.remove(i); должно быть modelSelObj.remove(i); )))

    • Да, действительно ошибка. То ли специально ляпнул, чтобы народ подумал чуток :), то ли ошибся как то. В самом то коде правильно написано, потому и работает.

  6. Рустам:

    Да это просто коряво вставилось)) Половину текста урезало при вставке)))

  7. Рустам:

    Бывает))) Спасибо за скрипт, очень нужен был, а я с js не ахти)))

  8. Михаил:

    Здравствуйте, что то не получается у меня объявить прайс, не могли бы Вы немного по подробнее объяснить, по поводу объявления прайса?
    Заранее благодарен.

    • Что можно сказать по поводу объявления прайса… Я предполагаю, что у вас на сайте, к примеру, есть некая база данных, где хранится информация о стоимости услуг. В зависимости от структуры этой БД, а также используемого движка сайта, надстроек и т.п., а возможно, и просто написав не шибко сложную функцию, вы представляете эти данные из БД в виде кода javascript — а именно, как объявление двумерного массива. Пример такого массива вы видите в листниге.
      Поможет вам такое объяснение? :)

  9. Павел:

    А как сюда подключить еще 2 выпадающих окна?

  10. Павел:

    Да выпадающие списки пробую добавить еще 2 не получается тоесть они есть только они не работают. Подскажите пожалуйста вариант с 4 выпадающими списками.

    • Создавать какой то абстрактный код вещь нудная и неблагодарная. Возможно, если вы покажете что за задачу вы решаете, на каком этапе застопорились, то я смогу вам, Павел, помочь.