CodeLAB
на главную карта сайта обратная связь

Популярные задачи:

#Выборка конкретной записи из таблицы. (28972 hits)
#Таймер. (37889 hits)
#ООП на javascript: классы, наследование, инкапсуляция. (251581 hits)
#Создание нестандартного (custom-ного) окна браузера. (33155 hits)
#Наибольший общий делитель. (185863 hits)
#Обработка шаблонных писем. (35122 hits)
#Пирамидальная сортировка. (193531 hits)
#Преобразование целых чисел в битовый массив. (34207 hits)
#Сохранение данных формы после перезагрузки через куки. (193158 hits)
#Отслеживание изменений файла. (34519 hits)
#"C# и платформа .NET" Эндрю Троелсен (Andrew Troelsen, "C# and the .NET platform"), листинги, код, примеры из книги, исходники. (35362 hits)
#Вставка новой записи в таблицу БД. (33266 hits)
#Числа Армстронга. (42759 hits)
#Вычисление минимального / максимального значения. (70733 hits)
#Вычисление эксцесса и коэффициентов асимметрии заданной выборки. (42868 hits)
#Вращение фигуры в плоскости. (36815 hits)
#"Липкие" окна. (28548 hits)
#Случайный выбор элемента при неизвестном их количестве. (33440 hits)
#Двусторонняя карта. (30540 hits)
#Поразрядная сортировка, общий принцип. (123307 hits)


Главная >> Каталог задач >> Веб-разработка >> Клиентский скриптинг(js, vba и т.д.) >> Манипуляции с выпадающим списком >>

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

Aвтор:
Дата:
Просмотров: 47834
реализации(javascript: 3шт...) +добавить

Вступление

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

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

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

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

 Линейное формирование [javascript]  ссылка
  1. function Fill() {
  2. var sel = document.getElementById('mysel');
  3. for (var i = 0; i < 10; i++){
  4. var newOpt = new Option("name" + i, "valfield" + i);
  5. sel.options.add(newOpt); // Добавление
  6. // Либо вместо этого так:
  7. //sel.options[i] = newOpt; // Косвенное добавление
  8. }
  9. return true;
  10. }

 

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

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

 Универсальное добавление вариант №1 [javascript]  ссылка
  1. function Fill2() {
  2. var sel = document.getElementById('mysel');
  3.  
  4. // Добавляем optgroup
  5. var newOptGroup = document.createElement('OPTGROUP');
  6. newOptGroup.label = 'Наша группа №1';
  7.  
  8. sel.appendChild(newOptGroup);
  9.  
  10. // Заполняем его пунктами
  11. for (var i = 0; i < 10; i++){
  12. var newOpt = new Option("name" + i, "valfield" + i);
  13.  
  14. newOpt.innerHTML = 'punkt' + i;
  15. newOptGroup.appendChild(newOpt);
  16.  
  17. }
  18. return true;
  19. }

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

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

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

 Универсальное добавление вариант №2, более красивый случай [javascript]  ссылка
  1. function Fill2() {
  2. var sel = document.getElementById('mysel');
  3.  
  4. // Добавляем optgroup
  5. var newOptGroup = document.createElement('OPTGROUP');
  6. newOptGroup.label = 'Наша группа №1';
  7.  
  8. sel.appendChild(newOptGroup);
  9.  
  10. // Заполняем его пунктами
  11. for (var i = 0; i < 10; i++){
  12. var newOpt = document.createElement('OPTION');
  13.  
  14. newOpt.value = 'value' + i;
  15. newOpt.innerHTML = 'punkt' + i;
  16. newOptGroup.appendChild(newOpt);
  17.  
  18. }
  19. return true;
  20. }

 

innerHTML

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

 

Реализации:

javascript(3)   +добавить

1) Линейное заполнение на javascript, code #96[автор:this]
2) Универсальное заполнение, вариант №1 на javascript, code #97[автор:this]
3) Универсальное заполнение, вариант №2 на javascript, code #98[автор:this]