The OpenNET Project / Index page

[ новости /+++ | форум | теги | ]

форумы  помощь  поиск  регистрация  майллист  ВХОД  слежка  RSS
"(HTML) Динамическое добавление элементов в SELECT"
Вариант для распечатки Архивированная нить - только для чтения! 
Пред. тема | След. тема 
Форумы WEB технологии (Public)
Изначальное сообщение [Проследить за развитием треда]

"(HTML) Динамическое добавление элементов в SELECT"
Сообщение от rarelang emailИскать по авторуВ закладки(??) on 04-Авг-04, 20:47  (MSK)
Всем привет,

Помогите мне пожалуйста решить следующую проблему, - мне нужно реализовать динамическое (при помощи 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.

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

  Рекомендовать в FAQ | Cообщить модератору | Наверх

 Оглавление

Индекс форумов | Темы | Пред. тема | След. тема
Сообщения по теме

1. "(HTML) Динамическое добавление элементов в SELECT"
Сообщение от StingFire Искать по авторуВ закладки(ok) on 05-Авг-04, 13:29  (MSK)
<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.

  Рекомендовать в FAQ | Cообщить модератору | Наверх


Удалить

Индекс форумов | Темы | Пред. тема | След. тема
Пожалуйста, прежде чем написать сообщение, ознакомьтесь с данными рекомендациями.




Партнёры:
PostgresPro
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2024 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру