Динамическое формирование выпадающего списка

• Вступление
• Линейное заполнение
• Формирование еще и optgroup-ов
• innerHTML
• Все реализации

Вступление

Очень часто при программировании интерактивного функционала веб-интерфейсов возникает задача модификации содержимого выпадающего списка select. В этом процессе следует выделить 2 отдельные подзадачи: это удаление(очищение) выпадающего списка и уже непосредственное динамическое формирование нового содержимого. В этой задаче речь идет о второй части конечно.

Линейное заполнение

Как известно html-элемент выпадающий список может быть 2-х уровневым. Имеются ввиду группирующие элементы optgroup внутри него конечно. Все же наиболее используемый тип списка на большинстве веб-страниц - это просто, линейный список, содержащий только элементы option. Поэтому логично будет помимо универсальной задачи, решить сначала наиболее распрастраненную и используемую задачу - линейное заполнение выпадающего списка.

2 варианта: либо использовать метод add у коллекции options нашего списка, либо косвенно вставлять в коллекцию новые объекты.

function Fill() {
    var sel = document.getElementById('mysel');
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);
        sel.options.add(newOpt);    // Добавление
        // Либо вместо этого так:
        //sel.options[i] = newOpt;  // Косвенное добавление
    }
    return true;
}

Формирование еще и optgroup-ов

Здесь возникают некоторые особенности. Вот один из вариантов работающего кода:

function Fill2() {
    var sel = document.getElementById('mysel');
 
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
 
    sel.appendChild(newOptGroup);
 
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);
 
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
 
    }
    return true;
}

Одна из особенностей состоит в том, что название элементов, присваиваемое в строке 12(первый параметр конструктора) - не формируется, что бы там ни стояло. Поэтому в 14-ой строке и идет принудительное выставление этого названия через innerHTML.

Второй момент - это то, что у элемента optgroup нет уже никакой коллекции options, как логично можно б было предположить. Вложенные в него элементы option помещаются лишь в DOM-кую коллекцию childNodes. Поэтому и использовать здесь можно только appendChild а не что-либо еще.

Ну и другой вариант, отличающийся тем, что создание option-ов делается через createElement, что приводит к более однообразному коду:

function Fill2() {
    var sel = document.getElementById('mysel');
 
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
 
    sel.appendChild(newOptGroup);
 
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = document.createElement('OPTION');
 
        newOpt.value      = 'value' + i;
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
 
    }
    return true;
}

innerHTML

Формирование списка через заполнение его свойства innerHTML - невозможно: браузер почему-то обрезает первый открывающий тег .

Реализации:

заполните необходимые поля!

название:
uri-имя*:
заголовок окна:
ЯП:	[другой...] pseudojavajavascriptpythonC++C#CphpGoqbasicrailsrubysmartytsqlvbnetvisualfoxproxmlactionscriptplsqlpascaloracle8sqlvbfortransmalltalkasmcssdelphigroovylispperlmysqlmatlab
код (double click - редактирование) (Esc - предпросмотр)
описание:
автор:	email:
пароль:	[для последующего редактирования]
	подписаться на комментарии**

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей