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

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

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

Динамическое удаление элементов списка с учетом optgroup-ов, наиболее правильный способ ссылка |режим:

<html>
<head>
    <title>Drop Down List Tests</title>
</head>
 
<body>
 
<select id="mysel">
<optgroup label="group1">
    <option value="1">1 item</option>
    <option value="2">2 item</option>
</optgroup>
    <option value="3">3 item</option>
    <option value="4">4 item</option>
    <option value="5">5 item</option>
</select>
<input type="button" value="Clear Select" onclick="return ClearSelect();">
 
<script language="javascript">
function ClearSelect() {
    var sel = document.getElementById('mysel');
 
    while (sel.childNodes.length) {
        // Данный if только для Opera-ы, которая не удаляет
        // optgroup, если в нем есть элементы.
        if (sel.firstChild.tagName == 'OPTGROUP') {
            while (sel.firstChild.childNodes.length) {
                sel.firstChild.removeChild(sel.firstChild.firstChild);
            }
        }
        sel.removeChild(sel.firstChild);
    }
    return true;
}
</script>
</body>
</html>

<html>
<head>
    <title>Drop Down List Tests</title>
</head>

<body>

<select id="mysel">
<optgroup label="group1">
    <option value="1">1 item</option>
    <option value="2">2 item</option>
</optgroup>
    <option value="3">3 item</option>
    <option value="4">4 item</option>
    <option value="5">5 item</option>
</select>
<input type="button" value="Clear Select" onclick="return ClearSelect();">

<script language="javascript">
function ClearSelect() {
    var sel = document.getElementById('mysel');
    
    while (sel.childNodes.length) {
        // Данный if только для Opera-ы, которая не удаляет
        // optgroup, если в нем есть элементы.
        if (sel.firstChild.tagName == 'OPTGROUP') {
            while (sel.firstChild.childNodes.length) {
                sel.firstChild.removeChild(sel.firstChild.firstChild);
            }
        }
        sel.removeChild(sel.firstChild);
    }
    return true;
}
</script>
</body>
</html>

Динамически удаляет содержимое выпадающего списка.
Работает - во всех "не старых" IE, Mozilla, Opera.

При этом в Mozilla и IE скрипт отработает даже если убрать if в строках 26-30.

Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

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

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

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

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

Вступление

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

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

innerHTML

Реализации: