nicht angemeldet
Eventhandler kaputt?
Hallo Leute,
Ich möchte ein <select>-Auswahlfeld dynamisch befüllen, und gleichzeitig einen Eventhandler onchange damit verknüpfen. onchange funktioniert super, solange das Feld nicht mit den DOM-Methoden bearbeitet wurde, aber anschließend leider nicht mehr. Wieso nicht? Ich sehe einfach nicht, was da falsch ist:
<html><head><title>Strange</title>
[code lang=javascript]
<script type="text/javascript">
Names = {
Ich: {},
Du: {},
Er: {},
Sie: {},
Es: {}
};
function newNames() {
var newList = document.createElement('select');
for (var theName in Names) {
var opt = document.createElement('option');
opt.value = theName;
opt.innerHTML = theName;
newList.appendChild(opt);
}
var listParent = document.getElementById("tList");
listParent.innerHTML = ""; //Alte Liste löschen
newList.id = "Names";
newList.onchange = "alert('Hey!');";
listParent.appendChild(newList);
// Nur zum Test:
var myNewList = document.getElementById("Names");
alert('onchange ist jetzt: ' + newList.onchange);
}
</script>
</head>
<body>
<div id="tList">
<select id="Names" size="1" onchange="alert('Wow!');">
<option>Heino</option>
<option>Michael Jackson</option>
<option>Tom Waits</option>
<option>Nina Hagen</option>
<option>Marianne Rosenberg</option>
</select>
</div>
<input id="newNames" type="button" value="Neu" onclick="newNames()"></input>
</body>
</html>
[/code]
Gibt es eigentlich eine bessere Möglichkeit ein DOM-Element zu löschen, ausser die innerHML-Eigenschaft auf den Leerstring zu setzen? Den DOM-Elementen fehlt anscheinend sowas wie eine Suicide- oder eine KillChild-Methode.
Danke für jede Hilfe,
Don P
-
Hi,
Das geht so nicht:
newList.onchange = "alert('Hey!');";
Wenn du irgendwo eine Funktion notiert hättest, z.B.:
function sagHey()
{
alert('Hey!');
}dann kannst du diese Funktion als Methode diener neuen Liste notieren:
newList.onchange = sagHey;
ansonsten mußt du's so notieren:
newList.onchange = function(){alert('Hey!');};
Gibt es eigentlich eine bessere Möglichkeit ein DOM-Element zu löschen, ausser die innerHML-Eigenschaft auf den Leerstring zu setzen? Den DOM-Elementen fehlt anscheinend sowas wie eine Suicide- oder eine KillChild-Methode.
Schau mal nach removeChild().
Gruß
peter-
Hallo,
Wenn du irgendwo eine Funktion notiert hättest, z.B.:
function sagHey()
{
alert('Hey!');
}dann kannst du diese Funktion als Methode diener neuen Liste notieren:
newList.onchange = sagHey;
ansonsten mußt du's so notieren:
newList.onchange = function(){alert('Hey!');};
Super, vielen Dank.
Ich versuche aber zuerst mal, die Länge des options-Arrays der Auswahlliste auf 0 zu setzen, um nicht die ganze Liste, sondern nur deren Inhalt zu löschen. Das sollte mir mir die <div>-Verpackung ersparen und auch die erneute Zuweisung derselben onchange-Funktion.
Gibt es eigentlich eine bessere Möglichkeit ein DOM-Element zu löschen, ausser die innerHML-Eigenschaft auf den Leerstring zu setzen? Den DOM-Elementen fehlt anscheinend sowas wie eine Suicide- oder eine KillChild-Methode.
Schau mal nach removeChild().
Aha, mach' ich.
Gute Nacht :-)
Don P-
Hi,
Ich versuche aber zuerst mal, die Länge des options-Arrays der Auswahlliste auf 0 zu setzen, um nicht die ganze Liste, sondern nur deren Inhalt zu löschen. Das sollte mir mir die <div>-Verpackung ersparen und auch die erneute Zuweisung derselben onchange-Funktion.
Dann solltest du auch nicht ein neues SELECT erzeugen und das alte durch das neue SELECT ersetzen, sondern denInhalt des SELECT austauschen und nicht ein neu erzeugtes SELECT in das DIV reinlegen.
Entweder:
SELECT.innerHTML='';
oder:
mit "removeChild()" und einer Schleife alle "childNodes" vom SELECT entfernen
oder:
SELECT.options.length auf null setzen
oder:
den Array SELECT.options mit einer Schleife durchlaufen und die jeweiligen OPTIONS mit SELECT.remove() entfernen
und SELECT dann neu auffüllen.
Gruß
peter-
Hallo,
Entweder:
SELECT.innerHTML='';
oder:
mit "removeChild()" und einer Schleife alle "childNodes" vom SELECT entfernen
oder:
SELECT.options.length auf null setzen
oder:
den Array SELECT.options mit einer Schleife durchlaufen und die jeweiligen OPTIONS mit SELECT.remove() entfernen
und SELECT dann neu auffüllen.Da gibt es ja so viele Möglichkeiten und ich hab ausgerechnet zuerst eine gefunden, die nicht funktioniert, Murphy lässt grüßen.
So klappt es prima:
names = { Ich: {}, Du: {}, Er: {}, Sie: {}, Es: {} }; function newNames() { var newList = document.getElementById("Names"); newList.innerHTML = ""; for (var theName in names) { var opt = document.createElement('option'); opt.value = theName; opt.innerHTML = theName; newList.appendChild(opt); } }newList.innerHTML = "";ist wohl das einfachste, scheint mir aber auch irgendwie frech (Holzhammermethode), zumal ich das so noch nirgends gesehen habe.
newList.options.length = 0;dagegen ist dokumentiert.remove() und remveChild() sind mir zu umständlich, wenn ohnehin alle option-Elemente gelöscht werden sollen.
Danke und Gruß, Don P
-
Hallo,
remove() und remveChild() sind mir zu umständlich, wenn ohnehin alle option-Elemente gelöscht werden sollen.
trotzdem nutzt du für meinen Geschmack innerHTML unnötig.
function newNames() { var select = document.getElementById("Names"); for (var i=select.options.length-1; i >= 0; i--) { select.remove(i); } for (var theName in names) { select.add(new Option(theName,theName,false,false)); } }vielleicht interessant, in den Dokumentationen zu lesen:
http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente@title=javascript/objekte/options.htm#neue_elemente, http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#select@title=javascript/objekte/htmlelemente.htm#select
man beachte, dass der IE bei der add()-Methode einen anderen 2. Parameter erwartet als die anderen Browser
Gruß plan_B
--
*®*´¯`·.¸¸.·-
Hi plan_B,
function newNames() {
var select = document.getElementById("Names");
for (var i=select.options.length-1; i >= 0; i--) {
select.remove(i);
}
for (var theName in names) {
select.add(new Option(theName,theName,false,false));
}
}> genau so hatt ichs gemeint. Nach meinem schlauen Buch soll auch funktionieren, die Länge des options-Arrays auf 0 zu setzen. (hatte in nem vorhergehenden Posting den Fehler drin, daß ich null und nicht 0 geschrieben hatte) Sollte also auch so funktionieren: ~~~javascript function newNames() { var select = document.getElementById("Names"); select.options.length=0; for (var theName in names) { select.add(new Option(theName,theName,false,false)); } }Wie gesagt, hab ich so nachgelesen, selbst aber noch nicht getestet.
Gruß
peter -
Hallo plan_B,
remove() und removeChild() sind mir zu umständlich, wenn ohnehin alle option-Elemente gelöscht werden sollen.
trotzdem nutzt du für meinen Geschmack innerHTML unnötig.
Ok, innerHTML wird vielleicht nicht überall unterstützt, wer weiß? Aber laut SELFHTML immerhin von "Internet Explorer, Mozilla Firefox 1.0, Netscape 6, Opera 7 und Konqueror 3.3". Das ist ja schonmal etwas.
Und was ist gegen
select.options.length = 0;zu sagen? Das ist doch wirklich einfacher als mit
for (var i=select.options.length-1; i >= 0; i--) {
select.remove(i);
}alle Array-Elemente einzeln zu löschen. Das gefällt mir eigentlich ganz gut: ~~~javascript > for (var theName in names) { > select.add(new Option(theName,theName,false,false)); > }aber mit
man beachte, dass der IE bei der add()-Methode einen anderen 2. Parameter erwartet als die anderen Browser
haben wir wieder den Salat. Browser-Weichen sind mir nämlich ein Greuel :-(.
Gruß, Don P
-
Hallo,
Und was ist gegen
select.options.length = 0;
> > zu sagen? Das ist doch wirklich einfacher als .... > stimmt, würde ich es in diesem Fall auch verwenden. ich wollte eigentlich diese beiden Methoden (add u. remove) in Erinnerung bringen, weil es damit auch möglich ist, die Optionliste zu bearbeiten. Dabei fiel mir dann auf, dass hier <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#select@title=javascript/objekte/htmlelemente.htm#select> die add()-Methode nicht so optimal beschrieben war. > haben wir wieder den Salat. Browser-Weichen sind mir nämlich ein Greuel :-(. > eine Browserweiche braucht man nur, wenn man eine Option einfügen möchte, fürs anfügen ist der 2.Parameter ja nicht erforderlich. Gruß plan\_B -- \*®\*´¯`·.¸¸.·-
Hallo,
Dabei fiel mir dann auf, dass hier http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#select@title=javascript/objekte/htmlelemente.htm#select die add()-Methode nicht so optimal beschrieben war.
Ja, das habe ich auch bemerkt, das Ding hat Tücken (s.u.).
eine Browserweiche braucht man nur, wenn man eine Option einfügen möchte, fürs anfügen ist der 2.Parameter ja nicht erforderlich.
Eben doch: Um eine Option zum Select anzufügen, braucht add() unbedingt als zweiten Parameter ein Option-Objekt oder den Wert null, außer mal wieder im IE: dem reicht eigentlich ein Parameter, aber falls doch ein zweiter existiert, darf der dummerweise weder ein Objekt noch der Wert null sein.
=> Man braucht für die add()-Methode eine Browserweiche. Es ist zum Mäuse melken...
Gruß, Don P
-
Hallo,
Eben doch: Um eine Option zum Select anzufügen, braucht add() unbedingt als zweiten Parameter ein Option-Objekt oder den Wert null, außer mal wieder im IE: dem reicht eigentlich ein Parameter, aber falls doch ein zweiter existiert, darf der dummerweise weder ein Objekt noch der Wert null sein.
danke, dass du das nochmal richtig gestellt hast. Hatte ich mal wieder nicht ausgiebig genug getestet.
Bisher hatte ich zum Anfügen weiterer Optionen auch immer dieses genutzt:
select.options[select.options.length] = new Option();Gruß plan_B
--
*®*´¯`·.¸¸.·
-
-
-
-
-
-
-
-