Добавить исходник, разместить код > Динамическая очистка выпадающего списка (select) на javascript, реализации на javascript

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

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

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

Вступление

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

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

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

Удаление только всех option-ов в выпадающем списке [javascript] ссылка

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

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:

Очищение всего, т.е. и option-ов и optgroup-ов. НЕ РАБОТАЕТ В Opera-е! [javascript] ссылка

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

var sel = document.getElementById('mysel');

while (sel.childNodes.length) {
    sel.removeChild(sel.firstChild);
}

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

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

Универсальное очищение, наиболее правильный способ [javascript] ссылка

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);
}

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! Которое достаточно просто обнулить и список автоматически очистится:

Очищение через innerHTML (Не работает в Opera) [javascript] ссылка

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

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

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

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

Реализации:

javascript(1) +добавить

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

<< назад наверх