Добавить <option> в <select>

Как на джаваскрипте реализовать сабж? Например при событии (onclick и т.п.)

Как я это делал. Все значения для селекта хранил в массиве. Была ф-ция которая содавала нужный список из массива. Когда надо добавить - добавляем в элемент и вызываем ф-цию "прорисовки". Я делал по такому принципу и у меня всё работало...

функция addInSelect добавляет в селект строку txt со значением val на n-ую позицию селекта.

<FORM  Name=F>
<select Name=spisok size=7>
<option>Это список с прокруткой
<option>Вторая строка
<option>Третья строка
<option selected>Четвертая строка</select>
<INPUT TYPE="button" value=remove onclick="removeFromSelect('F','spisok',document.F.spisok.selectedIndex)">
 
<INPUT TYPE="button" value=add onclick="addInSelect('F','spisok',document.F.spisok.selectedIndex+1,'txt','val')">
 
</FORM>
<!-- Кросбраузерность впечатляет: IE4, IE5, IE5.5, IE6 ,Opera6, Opera7, NN3, NN4, NN6, NN7, Mozilla -->
<script language=javascript>
function removeFromSelect(FName,SName,n)//Имя формы, имя селекта, индекс элемента подлежащего удалению
{
var myS=document.forms[FName].elements[SName];
if(myS.options && myS.options.remove)
    myS.options.remove(n);
else if(myS.remove)
    myS.remove(n);
else myS.options[n]=null;
}
 
function addInSelect(FName,SName,n,txt,val)
{
 var myS=document.forms[FName].elements[SName];
 var dl=myS.options.length;
 myS.options.length++;
 for(var i=dl;i>n;i--)
 {
   myS.options[i].value=myS.options[i-1].value;
   myS.options[i].text=myS.options[i-1].text;
 }
 
 myS.options[n].text=txt;
 myS.options[n].value=val;
 myS.options[n].selected=true;
 
 
}
 
</script>

Цитата Mixxx,7.07.04, 16:23

функция addInSelect добавляет в селект строку txt со значением val на n-ую позицию селекта.

Fantastic! Exactly what I need! Thx

А теперь то же самое с <table> - надо вставить <tr> с соотв. заданными <td>. Как?

Это сложнее, посмотри этот пример

 
<script LANGUAGE=JavaScript TYPE=text/javascript>
<!--
function appendText(text) {
var Tb=document.getElementById("tablica");
var Tbd=document.createElement('TBODY'); //CОЗДАДИМ TBODY их может быть несколько
var Tr=document.createElement("TR"); //создадим строку
var Td=document.createElement("TD"); // и ячейку таблицы
/* у ИЕ есть хорошее не стандартное свойство innerText
td.innerText=text;
но мы будем писать согласно рекомендации DOM...
*/
Td.appendChild(document.createTextNode(text)); //закинем в ячейку текст
Tr.appendChild(Td); //а саму ячейку в строку
Tbd.appendChild(Tr);//А САМУ строку в TBODY
Tb.appendChild(Tbd); //и наконец в таблицу
/* либо проще
tb.innerHTML+="<tr><td>"+text+</td></tr>";
*/
}
window.onload=function()//Когда страница загрузилась полностью
{
appendText('Добавили мы этот текст')
appendText('А потом ещё вот этот')
}
//-->
</SCRIPT>
 
 
<TABLE border=1 id=tablica>
<TR>
<TD>ФФ</TD>
</TR>
<TR>
<TD>FF</TD>
</TR>
</TABLE>

Я забыл добавить, что ето все должно работать только под ИЕ, так что кроссбраузерность - не приоритет. Спасибо, все здорово работает. Еще аналогичный вопрос: как удалять строки из таблицы?

Добавлено в 08.07.04, 10:17:
ОК, почитал об етом.


removeChild()

Alert: У меня

tb.innerHTML+="<tr><td>"+text+"</td></tr>";

не работает. Возвращает unknown runtime error. IE6.

Цитата

Tb.innerHTML+="<tr><td>"+text+"</td></tr>";

У меня в ослике тоже не работает, но в опрере, мозилле всё путём.
Так что это скорее вопрос к изготовителям этого эмулятора браузера(aka IE).

PS. Я кстати заметил что в ослике при изменение innerHTML'я сложных теговых объектов (типа select, table) начинаются глюки.

Блин, а все же, как удалить ряды из таблицы? Скажем, все кроме первого? Не могу =\

И как задать параметры для добавляемых <td>?

Цитата

TrivialCore, 8.07.04, 21:33
Блин, а все же, как удалить ряды из таблицы? Скажем, все кроме первого?

<script LANGUAGE=JavaScript TYPE=text/javascript>
 
window.onload=function()
{
 var Tb=document.getElementById("tablica");
 for(var i=Tb.rows.length-1;i>=1;i--)//начинаем с конца
 Tb.rows[i].parentNode.removeChild(Tb.rows[i]);// :-)
}
 
</SCRIPT>
 
<TABLE border=1 id=tablica>
<TR><TD>AAA</TD></TR>
<TR><TD>BBB</TD></TR>
<TR><TD>CCC</TD></TR>
<TR><TD>DDD</TD></TR>
</TABLE>

Цитата

TrivialCore, 8.07.04, 21:33
как задать параметры для добавляемых <td>?

Прямо так и присваивай
После того как создал td (td=document.createElement("TD") ) -
cвойства обекта td автоматически становяться атрибутами HTML тега <td>:

td.height=30;

даст:

 <td height=30>

Сообщение отредактировано: Mixxx - 08.07.04, 16:02

Еще вопрос немного в тему, вернее трабла:

<html>
<table id="tablica" style="border: 1px">
<tr id="row1">
<td width="150" onclick="doSelect(1);">fdsa</td><td width="50" onclick="doSelect(1);">hjkl</td><td width="400" onclick="doSelect(1);">vcxz</td>
</tr>
<tr id="row2">
<td onclick="doSelect(2);">fdsa</td><td onclick="doSelect(2);">hjkl</td><td onclick="doSelect(2);">vcxz</td>
</tr>
<tr id="row3">
<td onclick="doSelect(3);">fdsa</td><td onclick="doSelect(3);">hjkl</td><td onclick="doSelect(3);">vcxz</td>
</tr>
<tr id="row4">
<td onclick="doSelect(4);">fdsa</td><td onclick="doSelect(4);">hjkl</td><td onclick="doSelect(4);">vcxz</td>
</tr>
<tr id="row5">
<td onclick="doSelect(5);">fdsa</td><td onclick="doSelect(5);">hjkl</td><td onclick="doSelect(5);">vcxz</td>
</tr>
<tr id="row6">
<td onclick="doSelect(6);">fdsa</td><td onclick="doSelect(6);">hjkl</td><td onclick="doSelect(6);">vcxz</td>
</tr>
<tr id="row7">
<td onclick="doSelect(7);">fdsa</td><td onclick="doSelect(7);">hjkl</td><td onclick="doSelect(7);">vcxz</td>
</tr>
<tr id="row8">
<td onclick="doSelect(8);">fdsa</td><td onclick="doSelect(8);">hjkl</td><td onclick="doSelect(8);">vcxz</td>
</tr>
</table>
<script>
function doSelect(ind) {
var tb = document.getElementById("tablica");
for (i=0; i<tb.rows.length; i++) {
tb.rows[i].style = "background: #ffffff; color: #000000";
}
var s1 = "row" + ind;
var Tr = document.getElementById(s1);
Tr.style = "background: #223399; color: #ffffff";
}
</script>
</html>

Ошибка в строке 32: не найдено члена группы или что-то в этом роде. Причем это в IE6, в Опере все здорово. Как исправить? Мне именно осел нужен, в остальных браузерах пусть горит синим пламенем...

Добавлено в 08.07.04, 19:58:
Да, 32-я строка это

tb.rows[i].style = "background: #ffffff; color: #000000";

ОК, разобрался. Надо было:

function doSelect(ind) {
var tb = document.getElementById("tablica");
for (i=0; i<tb.rows.length; i++) {
tb.rows[i].style.background = "#ffffff";
tb.rows[i].style.color = "#000000";
}
var s1 = "row" + ind;
var Tr = document.getElementById(s1);
Tr.style.background = "#223399";
Tr.style.color = "#ffffff";
}

Я бы сделал примерно так:

<table id="tablica" border=1>
<tr>
    <td width="150">fdsa<td width="50">hjkl
<tr>
    <td>fdsa<td>hjkl
<tr>
    <td>fdsa<td>hjkl
<tr>
    <td>fdsa<td>hjkl
</table>
 
<script>
window.onload=function()
{
    var trs=document.getElementById("tablica").rows;//коллекция ячеек таблицы
    var oldSelTr;//предыдущая выделенная ячейка
    for(var i=0;i<trs.length;i++)//пробегаемся по всем ячейкам таблицы
    trs[i].onclick=function()//у каждой ячейки таблицы устанавливаем обработчик клика
    {  
        if(typeof oldSelTr=="object")//если oldSelTr уже инициализированна
            with(oldSelTr.style)//возращаем её к обычному состоянию
            {
                background = "#ffffff";
                color = "#000000";
            }
        //this - это ячейка возбудившая клик
        with(this.style)//
        {
            background = "#223399";
            color = "#ffffff";
        }
        oldSelTr=this;//запоминаем предыдущую выделенную ячейку
    }
}//end of window.onload
</script>

Действительно, лучше. Код и дизайн - отдельно. 5 баллов =)