URL: https://www.opennet.me/cgi-bin/openforum/vsluhboard.cgi
Форум: vsluhforumID8
Нить номер: 2549
[ Назад ]

Исходное сообщение
"(HTML) Динамическое добавление элементов в SELECT"

Отправлено rarelang , 04-Авг-04 20:47 
Всем привет,

Помогите мне пожалуйста решить следующую проблему, - мне нужно реализовать динамическое (при помощи JavaScript) добавление/удаление элементов в HTML элементе SELECT. Задача усложняется тем что мне нужно чтобы данная функциональность идеально работала в Mozilla и Netscape.

В принципе я реализовал требуемые функции путем простого изменения свойства innerHTML/outerHTML у элемента SELECT достукиваясь к нему через id функцией getElementById, но я столкнулся с тем что это работает только в Internet Explorer, а этот вариант мне абсолютно не подходит.

Решение работающее в Internet Explorer и не работающее в остальных браузерах привожу ниже:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<script language="JavaScript">
    function addteg()
    {
    var str="<option>"+"бла бла бла"+"</option>";
    document.getElementById("TEGS").outerHTML="<select id=\"TEGS\" size=\"1\">"+str+"</select>";
    }
</script>
<body onLoad="addteg()">
    <select id="TEGS">
    </select>
</body>
</html>

Подскажите мне пожалуйста как мне реализовать требуемую функциональность в Mozilla или Netscape.

Заранее спасибо за любой ответ и отдельное огромное спасибо за пример кода.


Содержание

Сообщения в этом обсуждении
"(HTML) Динамическое добавление элементов в SELECT"
Отправлено StingFire , 05-Авг-04 13:29 
<html>
<head><title>Test</title>
<script language="JavaScript" type="text/javascript">

function setOptions () {
    var option = document.getElementById ('my_select');
    
    //Удалить все дочерние элементы
    while (option.childNodes.length > 0)
        option.removeChild (option.childNodes[0]);
    
    //Добавить новые
    for (var i = 0; i < 10; i++) {
        var node = document.createElement ('option');
        node.value = i;
        node.appendChild (document.createTextNode ('Value ' + i));
        option.appendChild (node);
    }
}
</script>
<body>
<select id="my_select"><option value="v1">test</option></select>
<p>
<input type="button" value="Set option"  onclick="setOptions ();">
</p>
</body>
</html>

Работает в IE, Mozilla, Opera. В других проверяй сам :)
Вообще должен работать во всех браузерах с поддержкой DOM.