Firefox Problem mit JS-Bearbeitung von OPTION-TAG

[Holger1978]

Hallo,

ich hab folgendes Problem. Ich hab auf einer Seite zwei SELECT-Felder und will über Buttons Einträge von einer in die andere verschieben und umgekehrt. Mit Opera und IE funktionierts auch, aber Firefox macht genau gar nichts.

Kann mir einer helfen???

Hier der js-Code:
function select(columnsToChoose,columnsChoosen, selected)
{
//Option erezeugen
var selectedIndex = columnsToChoose.selectedIndex;

if(selectedIndex>=0)
{
var selectedOption = columnsToChoose.options[columnsToChoose.selectedIndex];
var newOption = document.createElement("option");
newOption.text=selectedOption.text;
newOption.value=selectedOption.value;
columnsChoosen.add(newOption,columnsChoosen.length);
columnsToChoose.options[columnsToChoose.selectedIndex] = null;
reselect(columnsToChoose, selectedIndex);
columnsChoosen.selectedIndex=columnsChoosen.length-1;
}
}

function reselect(selectObj, index)
{
if(selectObj.length == 0)
{
return;
}
else if (index >= selectObj.length)
{
selectObj.selectedIndex = index-1;
return;
}
else
{
selectObj.selectedIndex = index;
return;
}
}

function selectItem()
{
var columnsToChoose = document.getElementsByName("columnsToChoose")[0];
var columnsChoosen = document.getElementsByName("columnsChoosen")[0];
select(columnsToChoose,columnsChoosen);
}

function deselectItem()
{
var columnsToChoose = document.getElementsByName("columnsToChoose")[0];
var columnsChoosen = document.getElementsByName("columnsChoosen")[0];
select(columnsChoosen,columnsToChoose);
}

und hier noch der html-teil:

<FORM action="#" method="post">
<TABLE>
<TBODY>
<TR>
<TD>
<SELECT size="10" name="columnsToChoose" type="select-multiple">
<OPTION value="Wert1">Wert1</OPTION>
<OPTION value="Wert2">Wert2</OPTION>
<OPTION value="Wert3">Wert3</OPTION>
<OPTION value="Wert4">Wert4</OPTION>
<OPTION value="Wert5">Wert5</OPTION>
</SELECT>
</TD>
<TD>
<TABLE>
<TBODY>
<TR>
<TD><INPUT onclick="selectItem();" type="button" value=">" name="select"></TD>
</TR>
<TR>
<TD><INPUT onclick="deselectItem();" type="button" value="<" name="unselect"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD>
<SELECT size="10" name="columnsChoosen" type="select-multiple">
<OPTION value="Wert6">Wert6</OPTION>
<OPTION value="Wert7">Wert7</OPTION>
<OPTION value="Wert8">Wert8/OPTION>
</SELECT>
</TD>
</TBODY>
</TABLE>
</FORM>

 

[Malleus]

Ändere mal folgendes ab:

//columnsChoosen.add(newOption,columnsChoosen.length);
columnsChoosen.options[columnsChoosen.options.length]=newOption;

Wie's aussieht, kennt FF kein "add",

Dann hast Du noch weiter unten ein "<" vergessen:

<OPTION value="Wert8">Wert8</OPTION>

 

[Holger1978]

Hi,

und danke. ich hab das gestern gleich auch noch ausprobiert. Allerdings kam bei mir der Internet Explorer jetzt nicht mehr mit dem neuen Befehl zurecht.
Scheinbar gibts dafür keinen einheitlich unterstützten Befehl. Ich hab jetzt noch eine Browserabfrage davor geschaltet.

Die Funktion die das rüberschieben jetzt letztlich regelt sieht nun so aus:

function select(columnsToChoose,columnsChoosen, selected)
{
//Option erezeugen
var selectedIndex = columnsToChoose.selectedIndex;

if(selectedIndex>=0)
{
var selectedOption = columnsToChoose.options[columnsToChoose.selectedIndex];
var newOption = document.createElement("option");

newOption.text=selectedOption.text;
newOption.value=selectedOption.value;

if (navigator.appName.indexOf("Netscape") != -1)
{
columnsChoosen[columnsChoosen.length]= newOption;
}
else
{
columnsChoosen.add(newOption,columnsChoosen.length);
}
columnsToChoose.options[columnsToChoose.selectedIndex] = null;
reselect(columnsToChoose, selectedIndex);
columnsChoosen.selectedIndex=columnsChoosen.length-1;
}
}

Danke für die Hilfe.

 

[ein schlauer]

seltsam, bei mir Funktioniert die Variante von Malleus in allen Browsern die ich bisher getestet habe:

http://javascript.jstruebig.de/source/optionlisten.html