Очень часто при программировании интерактивного функционала веб-интерфейсов возникает задача модификации содержимого выпадающего списка 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; }
Здесь возникают некоторые особенности. Вот один из вариантов работающего кода:
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 - невозможно: браузер почему-то обрезает первый открывающий тег .