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

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

#Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом. (46250 hits)
#Вращение фигуры в плоскости. (40055 hits)
#Овал, вписанный в прямоугольник. (37868 hits)
#Улучшение быстрой сортировки. (76912 hits)
#Рисование Фрактала (листьев папоротника). (53163 hits)
#Предварительная загрузка изображений. (47214 hits)
#Замена символа строки. (443229 hits)
#"The Java Programming Language" Ken Arnold, James Gosling, David Holmes листинги, код, примеры из книги, исходники. (61068 hits)
#Просмотр изображения во всплывающем окне. (89254 hits)
#Шейкер-сортировка. (71202 hits)
#ООП на javascript: классы, наследование, инкапсуляция. (257619 hits)
#Сортировка Шелла, обший принцип. (145050 hits)
#Сравнение алгоритмов быстрой сортировки. (73933 hits)
#Простой генератор случайных чисел. (134001 hits)
#Вычисление двойного интеграла с использованием MPI. (60338 hits)
#Курсы валют. (67431 hits)
#Преобразование сумм из цифрового представления в строковое. (175702 hits)
#Поверхностное клонирование. (27675 hits)
#Доступ ко всем полям и методам. (58030 hits)
#Логирование в GUI. (32331 hits)


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

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

Aвтор:
Дата:
Просмотров: 51907
реализации(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]