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

• Вступление
• Простое удаление(только option-ов)
• Универсальное удаление(+optgroup-ы)
• innerHTML
• Все реализации

Вступление

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

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

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

var sel = document.getElementById('mysel');
 
//while (sel.selectedIndex != -1) { // Либо так
while (sel.options.length) {
  sel.options[0] = null;
}

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

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

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

var sel = document.getElementById('mysel');
 
while (sel.childNodes.length) {
    sel.removeChild(sel.firstChild);
}

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

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

var sel = document.getElementById('mysel');
 
while (sel.childNodes.length) {
    if (sel.firstChild.tagName == 'OPTGROUP') {
        while (sel.firstChild.childNodes.length) {
            sel.firstChild.removeChild(sel.firstChild.firstChild);
        }
    }
    sel.removeChild(sel.firstChild);
}

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

innerHTML

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

function ClearSelect3() {
    var sel = document.getElementById('mysel');
    sel.innerHTML = null;
    return true;
}

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

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

Реализации:

заполните необходимые поля!

название:
uri-имя*:
заголовок окна:
ЯП:	[другой...] pseudojavajavascriptpythonC++C#CphpGoqbasicrailsrubysmartytsqlvbnetvisualfoxproxmlactionscriptplsqlpascaloracle8sqlvbfortransmalltalkasmcssdelphigroovylispperlmysqlmatlab
код (double click - редактирование) (Esc - предпросмотр)
описание:
автор:	email:
пароль:	[для последующего редактирования]
	подписаться на комментарии**

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей