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

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

#Отслеживание изменений файла. (35141 hits)
#Выборка всех записей таблицы. (30655 hits)
#Сравнение алгоритмов сортировки массива. (173325 hits)
#Создание простейшей таблицы. (34483 hits)
#Полезные утилиты, небольшие api и библиотеки и проч.. (66625 hits)
#Масштабирование, пропорциональное изменение размеров картинки. (94726 hits)
#Интерактивная, динамическая подгрузка картинок. (67031 hits)
#Поразрядная сортировка массива подсчетом. (128723 hits)
#Последовательный поиск и его оптимизации. (42947 hits)
#Преобразование RGB в HEX и обратно HEX в RGB. (54099 hits)
#Постраничный вывод. (68259 hits)
#Поиск дубликатов внутри файла. (29098 hits)
#Рисование тора. (32205 hits)
#ООП на javascript: классы, наследование, инкапсуляция. (252057 hits)
#Овал, вписанный в прямоугольник. (35013 hits)
#Валидация, динамическая проверка заполнения html форм. (205048 hits)
#Вставка новой записи в таблицу БД. (34101 hits)
#Вычисление медианы заданной выборки. (46998 hits)
#Таймер. (38412 hits)
#Найти максимальную сумму в последовательности. (127133 hits)


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

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

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