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

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

#Косинус. (37632 hits)
#Вычисление эксцесса и коэффициентов асимметрии заданной выборки. (43686 hits)
#Передача данных из основного во всплывающее-popup окно через POST. (113627 hits)
#Таймер. (38662 hits)
#Часики на js. (88434 hits)
#Динамическое формирование выпадающего списка. (49051 hits)
#Древовидные структуры. (55025 hits)
#Динамическая очистка выпадающего списка (select) на javascript. (86860 hits)
#Относительный путь к файлу. (37518 hits)
#Циклический сдвиг массива или строки - 3 уникальных алгоритма. (374770 hits)
#Рисование полусферы. (26454 hits)
#Улучшение быстрой сортировки. (72908 hits)
#Создание нестандартного (custom-ного) окна браузера. (33943 hits)
#Загрузчик классов. (40775 hits)
#Отслеживание изменений файла. (35642 hits)
#Преобразование целых чисел в битовый массив. (35104 hits)
#Рисование множества Мандельброта. (41722 hits)
#"The Java Programming Language" Ken Arnold, James Gosling, David Holmes листинги, код, примеры из книги, исходники. (58471 hits)
#Курсы валют. (65019 hits)
#Работа с камерой. (33748 hits)


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

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

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