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

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

#Предварительная загрузка изображений. (43316 hits)
#Поразрядная сортировка, общий принцип. (121438 hits)
#Постепенное затемнение. (45991 hits)
#Переворот символов строки (или элементов одномерного массива). (105620 hits)
#"C# и платформа .NET" Эндрю Троелсен (Andrew Troelsen, "C# and the .NET platform"), листинги, код, примеры из книги, исходники. (33975 hits)
#Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом. (41519 hits)
#Масштабирование, пропорциональное изменение размеров картинки. (91699 hits)
#Сортировка вставкой. (104174 hits)
#Использование компилируемых (prepared) запросов. (26424 hits)
#qForms, библиотека типичного функционала валидации/построения/связки html-форм. (133187 hits)
#Летающие, крутящиеся шарики. (39419 hits)
#Найти максимальную сумму в последовательности. (121681 hits)
#ООП на javascript: классы, наследование, инкапсуляция. (250069 hits)
#Последовательный поиск и его оптимизации. (42170 hits)
#Простая геометрическая и текстовая анимация. (396956 hits)
#Вычисление среднего, среднего отклонения, среднеквадратического отклонения и дисперсии заданной выборки. (42254 hits)
#Рисование линии. (34369 hits)
#Преобразование сумм из цифрового представления в строковое. (165156 hits)
#Счетчик времени с точностью до микросекунд. (119749 hits)
#Рисование куба. (54137 hits)


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



Динамическая очистка выпадающего списка (select) на javascript

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

Вступление

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

Простое удаление(только option-ов)

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

 Удаление только всех option-ов в выпадающем списке [javascript]  ссылка
  1. var sel = document.getElementById('mysel');
  2.  
  3. //while (sel.selectedIndex != -1) { // Либо так
  4. while (sel.options.length) {
  5. sel.options[0] = null;
  6. }


Следует отметить, что конструкция sel.options[0] = null; работает безупречно во всех современных браузерах, в то время как наиболее привычный из документации sel.options.remove(0) - не работает в Mozilla.

Универсальное удаление(+optgroup-ы)

Для Mozilla-ы и IE существует очень простое решение, основывающееся на свойствах объектой модели DOM:

 Очищение всего, т.е. и option-ов и optgroup-ов. НЕ РАБОТАЕТ В Opera-е! [javascript]  ссылка
  1. var sel = document.getElementById('mysel');
  2.  
  3. while (sel.childNodes.length) {
  4. sel.removeChild(sel.firstChild);
  5. }


Для того чтобы подобное заработало и в Opera - нужно сделать совсем немногое: вручную аналогично очищать содержимое optgroup-а. При этом данное решение и является наиболее правильным, поскольку удаление optgroup-а без удаления его содержимого приводящее к нужному результату в Mozilla & IE - выглядет скорее хаком.

Итак, получим:

 Универсальное очищение, наиболее правильный способ [javascript]  ссылка
  1. var sel = document.getElementById('mysel');
  2.  
  3. while (sel.childNodes.length) {
  4. if (sel.firstChild.tagName == 'OPTGROUP') {
  5. while (sel.firstChild.childNodes.length) {
  6. sel.firstChild.removeChild(sel.firstChild.firstChild);
  7. }
  8. }
  9. sel.removeChild(sel.firstChild);
  10. }


Работает как было доказано в IE & Mozilla & Opera.

innerHTML

- Как же? - могут некоторые воскликнуть! К чему весь этот бал-маскарад с удалением каждого пункта и т.д., если есть чудодейственное свойство у списка - innerHTML! Которое достаточно просто обнулить и список автоматически очистится:

 Очищение через innerHTML (Не работает в Opera) [javascript]  ссылка
  1. function ClearSelect3() {
  2. var sel = document.getElementById('mysel');
  3. sel.innerHTML = null;
  4. return true;
  5. }

Да, все верно, но во-первых, как показывают опыты, Opera 8.52 низачто не удалит optgroup в этом случае, во-вторых, старые версии браузеров вообще не имеют этого свойства и в них мы получим exception браузера, и в-третьих, самое главное - это все же получается хак, противоречащий DOM-принципам работы с объектами документа.

Поэтому его использование предлагается оставить на рассмотрение разработчикам (работает в Mozilla и IE 6.0).

Реализации: javascript(1)   +добавить реализацию

1) Универсальное очищение на javascript, code #95[автор:this]