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

<< назад
распечатать обсудить >>


Динамическое формирование выпадающего списка
реализации: javascript, количество: 3

Aвтор: this
Дата: 02.03.2006
Просмотров: 35155
Рейтинг: 3/7,4.89(2723)
+
реализации(исходники) +добавить

Вступление

Очень часто при программировании интерактивного функционала веб-интерфейсов возникает задача модификации содержимого выпадающего списка 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) Линейное заполнение, code #96[автор:this]
2) Универсальное заполнение, вариант №1, code #97[автор:this]
3) Универсальное заполнение, вариант №2, code #98[автор:this]


<< назад наверх
распечатать обсудить >>

 
каталог | задачи | паттерны | исходники | стат | форумы | карта сайта | контакты | ссылки 
© 2000-2018 CodeLAB Group
  Все права защищены
Страница сгенерирована за 0.013406 секунд
Количество запросов к БД: 14, gzip: 11.7kb/59.0kb(81%)