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

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

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

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

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

var priceData = [ { "firm": "Brother", "device": "Brother HL-1030/1230/1240/1250/1270", "cart": "TN6300/6600", "p": "380" }, 
{ "firm": "Brother", "device": "Brother HL-1430/1440/1450/1470", "cart": "TN6300/6600", "p": "360"}, 
{ "firm": "Brother", "device": "Brother MFC-8350/8750/9650/9660/9750/9760", "cart": "TN6300/6600", "p": "400"},
{ "firm": "Brother", "device": "Brother MFC-9850/9860/9870/9880", "cart": "TN6300/6600", "p": "420"}, 
... ];

var priceData = [ { "firm": "Brother", "device": "Brother HL-1030/1230/1240/1250/1270", "cart": "TN6300/6600", "p": "380" },

{ "firm": "Brother", "device": "Brother HL-1430/1440/1450/1470", "cart": "TN6300/6600", "p": "360"},

{ "firm": "Brother", "device": "Brother MFC-8350/8750/9650/9660/9750/9760", "cart": "TN6300/6600", "p": "400"},

{ "firm": "Brother", "device": "Brother MFC-9850/9860/9870/9880", "cart": "TN6300/6600", "p": "420"},

... ];

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

<form>
Выберите бренд:
<select id="firm">
  <option value="">-- бренд не выбран --</option>
</select>

<div id="modelCont" style="display: none;">
  Выберите модель картриджа:
  <select id="model">
    <option value="">-- модель не выбрана --</option>
  </select>
</div>
</form>

<form>

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

<option value="">-- бренд не выбран --</option>

</select>

Выберите модель картриджа:

<option value="">-- модель не выбрана --</option>

</select>

</div>

</form>

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

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

function firm_init() {
    var firmSelObj = document.getElementById('firm');
    var priceLen = priceData.length;
    var selLen = firmSelObj.options.length;
    var lastFirm = "";
    for (var i=0; i < priceLen; i++) {
        var t = priceData[i];
        if (lastFirm != t.firm) {
            firmSelObj.options[selLen ++] = new Option(t.firm, t.firm);
            lastFirm = t.firm;
        }
    }
}

function firm_init() {

var firmSelObj = document.getElementById('firm');

var priceLen = priceData.length;

var selLen = firmSelObj.options.length;

var lastFirm = "";

for (var i=0; i < priceLen; i++) {

var t = priceData[i];

if (lastFirm != t.firm) {

firmSelObj.options[selLen ++] = new Option(t.firm, t.firm);

lastFirm = t.firm;

}

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

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

function onchangeFirmSelect() {
    var firmSelObj = document.getElementById('firm');
    var modelContainer = document.getElementById('modelCont');
    var currentFirm = firmSelObj.value;
    if (currentFirm == "") {
        modelContainer.style.display = "none"; //бренд не выбран
    } else {
        var modelSelObj = document.getElementById('model');
        //очистим список моделей - все, кроме первого элемента
        for (var i=modelSelObj.options.length-1; i > 0; i--) {
          modelSelObj.remove(i);
        }
        //загрузим список моделей соответствующего бренда
        var priceLen = priceData.length; //число строк прайса
        var selLen = modelSelObj.options.length; //текущее число строк будет равно единице
        for (var i=0; i < priceLen; i++) {
            var t = priceData[i];
            if (currentFirm == t.firm)
                modelSelObj.options[selLen ++] = new Option(t.device + " (" + t.cart + ")", t.p); //модель устройства (картридж), цена заправки в рублях
        }
        modelContainer.style.display = "block"; //бренд выбран, покажем список
    }
}

function onchangeFirmSelect() {

var firmSelObj = document.getElementById('firm');

var modelContainer = document.getElementById('modelCont');

var currentFirm = firmSelObj.value;

if (currentFirm == "") {

modelContainer.style.display = "none"; //бренд не выбран

} else {

var modelSelObj = document.getElementById('model');

//очистим список моделей - все, кроме первого элемента

for (var i=modelSelObj.options.length-1; i > 0; i--) {

modelSelObj.remove(i);

}

//загрузим список моделей соответствующего бренда

var priceLen = priceData.length; //число строк прайса

var selLen = modelSelObj.options.length; //текущее число строк будет равно единице

for (var i=0; i < priceLen; i++) {

var t = priceData[i];

if (currentFirm == t.firm)

modelSelObj.options[selLen ++] = new Option(t.device + " (" + t.cart + ")", t.p); //модель устройства (картридж), цена заправки в рублях

}

modelContainer.style.display = "block"; //бренд выбран, покажем список

}

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

function onchangeModelSelect(th) {
    if (th.value != "")
        alert("Цена заправки выбранного картриджа : " + th.value + " рублей.");
}

function onchangeModelSelect(th) {

if (th.value != "")

alert("Цена заправки выбранного картриджа : " + th.value + " рублей.");

}

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

HTML часть:

<form>
  Выберите бренд:
  <select id="firm" onchange="onchangeFirmSelect();">
    <option value="">-- бренд не выбран --</option>
  </select>

  <div id="modelCont" style="display: none;">
    Выберите модель картриджа:
    <select id="model" onchange="onchangeModelSelect(this);">
      <option value="">-- модель не выбрана --</option>
    </select>
  </div>
</form>

<form>

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

<option value="">-- бренд не выбран --</option>

</select>

Выберите модель картриджа:

<option value="">-- модель не выбрана --</option>

</select>

</div>

</form>

javascript часть:

function firm_init() {
    var firmSelObj = document.getElementById('firm');
    var priceLen = priceData.length;
    var selLen = firmSelObj.options.length;
    var lastFirm = "";
    for (var i=0; i < priceLen; i++) { var t = priceData[i]; if (lastFirm != t.firm) { firmSelObj.options[selLen ++] = new Option(t.firm, t.firm); lastFirm = t.firm; } } } function onchangeFirmSelect() { var firmSelObj = document.getElementById('firm'); var modelContainer = document.getElementById('modelCont'); var currentFirm = firmSelObj.value; if (currentFirm == "") { modelContainer.style.display = "none"; //бренд не выбран } else { var modelSelObj = document.getElementById('model'); //очистим список моделей - все, кроме первого элемента for (var i=modelSelObj.options.length-1; i > 0; i--) devElm.remove(i);
        //загрузим список моделей соответствующего бренда
        var priceLen = priceData.length; //число строк прайса
        var selLen = modelSelObj.options.length; //текущее число строк будет равно единице
        for (var i=0; i < priceLen; i++) {
            var t = priceData[i];
            if (currentFirm == t.firm)
                modelSelObj.options[selLen ++] = new Option(t.device + " (" + t.cart + ")", t.p); //модель устройства (картридж), цена заправки в рублях
        }
        modelContainer.style.display = "block"; //бренд выбран, покажем список
    }
}
function onchangeModelSelect(th) {
    if (th.value != "")
        alert("Цена заправки выбранного картриджа : " + th.value + " рублей.");
}

firm_init();

function firm_init() {

var firmSelObj = document.getElementById('firm');

var priceLen = priceData.length;

var selLen = firmSelObj.options.length;

var lastFirm = "";

for (var i=0; i < priceLen; i++) { var t = priceData[i]; if (lastFirm != t.firm) { firmSelObj.options[selLen ++] = new Option(t.firm, t.firm); lastFirm = t.firm; } } } function onchangeFirmSelect() { var firmSelObj = document.getElementById('firm'); var modelContainer = document.getElementById('modelCont'); var currentFirm = firmSelObj.value; if (currentFirm == "") { modelContainer.style.display = "none"; //бренд не выбран } else { var modelSelObj = document.getElementById('model'); //очистим список моделей - все, кроме первого элемента for (var i=modelSelObj.options.length-1; i > 0; i--) devElm.remove(i);

//загрузим список моделей соответствующего бренда

var priceLen = priceData.length; //число строк прайса

var selLen = modelSelObj.options.length; //текущее число строк будет равно единице

for (var i=0; i < priceLen; i++) {

var t = priceData[i];

if (currentFirm == t.firm)

modelSelObj.options[selLen ++] = new Option(t.device + " (" + t.cart + ")", t.p); //модель устройства (картридж), цена заправки в рублях

}

modelContainer.style.display = "block"; //бренд выбран, покажем список

}

function onchangeModelSelect(th) {

if (th.value != "")

alert("Цена заправки выбранного картриджа : " + th.value + " рублей.");

}

firm_init();

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

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

Данная запись опубликована в 10.02.2010 23:06 и размещена в рубрике Программирование. 'Вы можете оставить отклик

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

Нумерация при выборке строк в mySQL

Апрель 24, 2023 г.

В MSSQL есть функция ROW_NUMBER(), которая нумерует строки выборки. В MySQL такой функции пока нет, но мы можем использовать трюк с переменными для достижения нужного эффекта. К примеру, вы хотите выбрать название книг и пронумеровать список. Изначально ...

Читать

Drupal API функции для работы с таксономией

Октябрь 12, 2018 г.

Drupal 7 поддерживает работу с таксономией на уровне ядра (модуль taxonomy), предоставляя богатый арсенал функций. Здесь мы рассмотрим только функции, ...

Читать

Drupal 7, проверить авторизован ли пользователь

Ноябрь 13, 2017 г.

Если в коде необходимо проверить авторизовался ли текущий пользователь, то можно использовать как минимум два подхода. Глобальная переменная user GLOBALS['user'] в Drupal хранит объект текущего пользователя, расширенного информацией о ролях пользователя. ...

Читать

Защита зараженного сайта: автоматическая сборка черного списка IP-адресов из логов Nginx

Февраль 4, 2026 г.

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

Читать

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

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

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

Андрей:

12 февраля 2020 в 03:05

Добрый вечер! Попробовал реализовать Ваш выпадающий список с картинкой, но почему-то не работает. Понимаю, что делаю что-то не так, но что? Всё уже перепробовал, но увы знаний не хватает(. Первый список работает, а вот второй не выпадает, и соответственно не изображается картинка к нему. Подскажите пожалуйста. Вот HTML часть:

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

— бренд не выбран —

Выберите модель картриджа:

— модель не выбрана —

Вот javascript часть:
var priceData = [ { «firm»: «Brother», «s_id»: «1», «device»: «Brother HL-1030/1230/1240/1250/1270», «cart»: «TN6300/6600», «p»: «380», «url»: «pics1/7688.png» }, { «firm»: «Brother», «s_id»: «1», «device»: «Brother HL-1430/1440/1450/1470», «cart»: «TN6300/6600», «p»: «380», «url»: «pics1/7689.jpg» }, { «firm»: «Brother», «s_id»: «1», «device»: «Brother MFC-8350/8750/9650/9660/9750/9760», «cart»: «TN6300/6600», «p»: «380», «url»: «pics1/7689.jpg» }, { «firm»: «Brother», «s_id»: «1», «device»: «Brother MFC-9850/9860/9870/9880», «cart»: «TN6300/6600», «p»: «380», «url»: «pics1/7689.jpg» }, { «firm»: «Brother», «s_id»: «1», «device»: «Brother HL-5040», «cart»: «HL7600», «p»: «380», «url»: «pics1/7689.jpg» }, { «firm»: «Brother», «s_id»: «1», «device»: «Brother HL-2030,HL-2070», «cart»: «TN2075», «p»: «380», «url»: «pics1/7689.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON MultiPass-10, FAX-B100/110/155/540/550 «, «cart»: «BX3», «p»: «250», «url»: «pics1/7689.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJ-30/BJC-50/55/70/80/85/BN-700 «, «cart»: «BC10», «p»: «150», «url»: «pics1/7693.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJ-30/BJC-50/70/80 «, «cart»: «BCI11-BLK», «p»: «150», «url»: «pics1/7694.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJC-70/50/55/80/85 (o) «, «cart»: «BCI11-COL», «p»: «200», «url»: «pics1/7695.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJC-210/240 «, «cart»: «BC05,PG36,38,41», «p»: «300», «url»: «pics1/7696.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJC-2000/2100/4000/4100/4200/4550/5500/S100 «, «cart»: «BC20», «p»: «250», «url»: «pics1/7697.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJC-2000/2100/4000/4100/4200/4550/5500/S100/FAX B215C/B230C «, «cart»: «BC21E-COL», «p»: «200», «url»: «pics1/7698.jpg» }, { «firm»: «Canon», «s_id»: «1», «device»: «CANON BJC-2000/2100/4000/4100/4200/4550/5500/S100/Fax B215C «, «cart»: «BCI21-BLK», «p»: «150», «url»: «pics1/7699.jpg» }];

function firm_init() {
var firmSelObj = document.getElementById(‘firm’);
var priceLen = priceData.length;
var selLen = firmSelObj.options.length;
var lastFirm = «»;
for (var i=0; i 0; i—) modelSelObj.remove(i);
//загрузим список моделей соответствующего бренда
var priceLen = priceData.length;
var selLen = modelSelObj.options.length;
for (var i=0; i < priceLen; i++) {
var t = priceData[i];
if (currentFirm == t.firm)
modelSelObj.options[selLen ++] = new Option(t.device + " (" + t.cart + ")", i);
}
modelContainer.style.display = "block";
}
}

function onchangeModelSelect(th) {
var t = priceData[th.value];
if (t != "") {
var content = 'Цена выбранной модели:’
+ t.p + ‘ руб.’;
var obj = document.getElementById(‘output’);
obj.innerHTML = content;
}
}

//инициализация первого списка
firm_init();

Ответить

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: