Optionen einer Select Box hinzufügen

[cr_man]

Hallo zusammen,

ich habe hier das Problem das ich einer Select Box keine Optionen hinzufügen kann.

Den Select Kontainer lasse ich mittels DOM erstellen, hier das Skript:

}else if(art == "Select"){
   var newSelect = document.createElement("select");
   var select_name = document.createAttribute("name");
   var select_id = document.createAttribute("id");
   var select_size = document.createAttribute("size");
   //var select_option = document.createAttribute("option");

var newOption = document.createElement("option");
   var option_name = document.createAttribute("name");
   var option_value = document.createAttribute("name");

select_name.nodeValue = document.getElementById("text_name").value+i;
   select_id.nodeValue = document.getElementById("text_name").value+i;
   select_size.nodeValue = document.getElementById("text_size").value;
   //select_option.nodeValue = document.getElementById("text_name").value+i;

option_name.nodeValue = document.getElementById("text_name").value;
   option_value.nodeValue = document.getElementById("text_value").value;

newSelect.setAttributeNode(select_name);
   newSelect.setAttributeNode(select_id);
   newSelect.setAttributeNode(select_size);
   //newSelect.setAttributeNode(select_option);

newOption.setAttributeNode(option_name);
   newOption.setAttributeNode(option_value);

quellcode_hinzufuegen(art);

document.getElementById("test_form").appendChild(newSelect);
   document.getElementById(document.getElementById("text_name").value+i).appendChild(newOption);
   loesch_button_erstellen(i);

document.getElementById('optionen_hinzu').style.visibility = 'visible';
   document.getElementById('optionen_hinzu').style.display = 'inline';

i++;
  }

Die Select Box wird auch problemlos erstellt, nachträglich möchte ich diese noch mit Optionen füllen und hieran scheitere ich im Moment. Hat dazu jemand eine Idee wie ich mittels dem DOM Baum darauf zugreifen kann?

Danke und Grüße,
cr_man

[wahsaga]

hi,

Die Select Box wird auch problemlos erstellt, nachträglich möchte ich diese noch mit Optionen füllen und hieran scheitere ich im Moment. Hat dazu jemand eine Idee wie ich mittels dem DOM Baum darauf zugreifen kann?

Ist dir das folgende zu einfach?
http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente

gruß,
wahsaga

[cr_man]

hi,

Die Select Box wird auch problemlos erstellt, nachträglich möchte ich diese noch mit Optionen füllen und hieran scheitere ich im Moment. Hat dazu jemand eine Idee wie ich mittels dem DOM Baum darauf zugreifen kann?

Ist dir das folgende zu einfach?
http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente

gruß,
wahsaga

Hallo wahsaga,

ich hatte es so schonmal probiert aber es wegen einem Fehler nicht hinbekommen, jetzt beim 2ten Anlauf klappt es.

Lösung:

NeuerEintrag = new Option(document.getElementById("neu").value, document.getElementById("neu").value, false, true);
  document.test_form.getElementsByTagName("select")[0].options[document.test_form.getElementsByTagName("select")[0].options.length] = NeuerEintrag;

Danke und Gruß,
cr_man

[Christian Seiler]

Hallo,

nur so als allgemeiner Tipp, weil ich das in Deinem Code gesehen habe (eine Lösung für Dein Problem hast Du ja bereits): Vergleiche mal:

document.getElementById('bla').eigenschaft1 = wert1;  
document.getElementById('bla').eigenschaft2 = wert2;  
document.getElementById('bla').eigenschaft3 = wert3;  
document.getElementById('bla').eigenschaft4 = wert4;  
document.getElementById('bla').eigenschaft5 = wert5;  
document.getElementById('bla').eigenschaft6 = wert6;  
document.getElementById('bla').eigenschaft7 = wert7;

mit:

meinObjekt = document.getElementById('bla');  
meinObjekt.eigenschaft1 = wert1;  
meinObjekt.eigenschaft2 = wert2;  
meinObjekt.eigenschaft3 = wert3;  
meinObjekt.eigenschaft4 = wert4;  
meinObjekt.eigenschaft5 = wert5;  
meinObjekt.eigenschaft6 = wert6;  
meinObjekt.eigenschaft7 = wert7;

Zweiteres ist *viel* schneller als ersteres, denn bei zweiterem rufst Du die langsame Funktion getElementById, die den ganzen DOM-Baum bis zum ersten Auftreten von der ID durchlaufen muss, nur ein einziges Mal auf, während Du bei ersterem diese ganze sieben Male aufrufst. Klar, hier macht es noch nichts aus, aber spätestens wenn Du Schleifen hast und einige mehr Eigenschaften modifizierst, macht sich das bemerkbar. Als Regel sollte man sich merken, die get*-Funktionen nur dann zu nutzen, wenn man sie auch wirklich braucht, d.h. wenn man sich ein Objekt als Referenz merken kann, dann ist das der vorzuziehende Weg.

Viele Grüße,
Christian

[rfb]

Moin

wie sieht es mit

with (document.getElementById('bla')) {  
eigenschaft1 = wert1;  
eigenschaft2 = wert2;  
eigenschaft3 = wert3;  
eigenschaft4 = wert4;  
eigenschaft5 = wert5;  
eigenschaft6 = wert6;  
eigenschaft7 = wert7;  
}

bzgl. Geschwindigkeit aus?
Wird getElementById hier jedesmal aufgerufen oder nur einmal.
Zumindest der Code ist ja nochmals wesentlich kürzer.

Gruß
rfb

[Christian Seiler]

Hallo rfb,

wie sieht es mit

with (document.getElementById('bla')) {

/* ... */ }

> bzgl. Geschwindigkeit aus?  
  
Nach meinen Tests mit Firefox 2.0 nur einmal - und das hätte ich auch erwartet.  
  
Viele Grüße,  
Christian  

-- 
"I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone." - Bjarne Stroustrup

[wahsaga]

hi,

Nach meinen Tests mit Firefox 2.0 nur einmal

Wie/wo verrät dir der Firefox, ob er da die Elementermittlung mehrmals durchführt, oder nur einmalig?

gruß,
wahsaga

[molily]

Hallo,

Wie/wo verrät dir der Firefox, ob er da die Elementermittlung mehrmals durchführt, oder nur einmalig?

Vielleicht so?

function func () {  
 alert("func");  
 return document.getElementById("bla");  
}  
with (func()) {  
   eigenschaft1 = wert1;  
   eigenschaft2 = wert2;  
   eigenschaft3 = wert3;  
   eigenschaft4 = wert4;  
   eigenschaft5 = wert5;  
   eigenschaft6 = wert6;  
   eigenschaft7 = wert7;  
}

Mathias

[wahsaga]

hi,

Wie/wo verrät dir der Firefox, ob er da die Elementermittlung mehrmals durchführt, oder nur einmalig?

Vielleicht so?

function func () {

alert("func");
return document.getElementById("bla");
}
with (func()) {
   eigenschaft1 = wert1;
   eigenschaft2 = wert2;
   eigenschaft3 = wert3;
   eigenschaft4 = wert4;
   eigenschaft5 = wert5;
   eigenschaft6 = wert6;
   eigenschaft7 = wert7;
}

  
Dass ein Browser das bei with() nicht macht, davon gehe ich eigentlich aus - diese Syntax besagt doch explizit, "nimm dir dieses Element, und führe damit die folgenden Schritte durch".  
  
Eher hätte es mich interessiert, ob das von Christian [zuerst angesprochene](https://forum.selfhtml.org/?t=142202&m=924009) wirklich eine relevante Verbesserung darstellt (vom Schreibaufwand her, OK - aber sonst?).  
Ich würde von einer optimierten Engine eigentlich erwarten, dass sie das Ergebnis einer Elementermittlung so lange "cached", wie an DOM-Struktur keine weiteren Änderungen (Hinzufügen/Entfernen von Elementen) durchgeführt werden.  
  
Und ob dein Vorschlag diesbezüglich Aussagekraft besitzt, bezweifle ich.  
getElementById ist nativ implementiert, deine func jedoch nicht. Dass \_diese\_, wenn man sie in den beiden Varianten aus Christians erstem Posting entsprechend einsetzen würde, mehrfach aufgerufen würde, würde ich sogar eigentlich erwarten.  
  
gruß,  
wahsaga  
  

-- 
/voodoo.css:  
#GeorgeWBush { position:absolute; bottom:-6ft; }

[Christian Seiler]

Hallo wahsaga,

Dass ein Browser das bei with() nicht macht, davon gehe ich eigentlich aus - diese Syntax besagt doch explizit, "nimm dir dieses Element, und führe damit die folgenden Schritte durch".

Es gibt diverse Punkte in der JavaScript-Spezifikation, die einen verblüffen, deswegen testete ich das mit with() nochmal (auf die Weise, die molily gesagt hat).

Eher hätte es mich interessiert, ob das von Christian zuerst angesprochene wirklich eine relevante Verbesserung darstellt

Tut es. Ich hatte in irgend einem Stück JS-Code, den ich so auf die Schnelle natürlich nicht mehr finden werde, mal eine Schleife drin, in der ich document.getElementById ('...').innerHTML += 'text'; gemacht habe - und das hat teilweise ewig gedauert. Als ich dann vor der Schleife var elem = doucment.getElementById ('...'); und in der Schleife nur elem.innerHTML += ...; machte, war das schon eine *deutlich spürbare* Verbesserung.

Ich würde von einer optimierten Engine eigentlich erwarten, dass sie das Ergebnis einer Elementermittlung so lange "cached", wie an DOM-Struktur keine weiteren Änderungen (Hinzufügen/Entfernen von Elementen) durchgeführt werden.

Beschwere Dich bei den Browserherstellern. ;-)

Und ob dein Vorschlag diesbezüglich Aussagekraft besitzt, bezweifle ich.
getElementById ist nativ implementiert, deine func jedoch nicht. Dass _diese_, wenn man sie in den beiden Varianten aus Christians erstem Posting entsprechend einsetzen würde, mehrfach aufgerufen würde, würde ich sogar eigentlich erwarten.

Bei molilys Beispiel ging es ja nur darum, ob bei with() eine Funktion mehrfach aufgerufen wird.

Viele Grüße,
Christian

[wahsaga]

hi,

Tut es. Ich hatte in irgend einem Stück JS-Code, den ich so auf die Schnelle natürlich nicht mehr finden werde, mal eine Schleife drin, in der ich document.getElementById ('...').innerHTML += 'text'; gemacht habe - und das hat teilweise ewig gedauert. Als ich dann vor der Schleife var elem = doucment.getElementById ('...'); und in der Schleife nur elem.innerHTML += ...; machte, war das schon eine *deutlich spürbare* Verbesserung.

innerHTML zu erweitern, ist idR. eine Veränderung des DOM-Baumes (bzw. es ist nicht trivial und mit wenig Aufwand entscheidbar, ob es eine darstellt oder nicht).

In so fern würde ich es für vertretbar halten, wenn in so einem Falle nicht "gecached" würde.

Ich würde von einer optimierten Engine eigentlich erwarten, dass sie das Ergebnis einer Elementermittlung so lange "cached", wie an DOM-Struktur keine weiteren Änderungen (Hinzufügen/Entfernen von Elementen) durchgeführt werden.

In deinem Beispiel wurden hingegen nur Objekteigenschaften geändert [1] - kein direkter Einfluss auf's DOM, keine erneute Elementfindung notwendig.

[1] Ja, innerHTML ist natürlich auch eine Eigenschaft - aber eben eine u.U. direkt DOM-Relevante, gegenüber vielen anderen.

getElementById ist nativ implementiert, deine func jedoch nicht. Dass _diese_, wenn man sie in den beiden Varianten aus Christians erstem Posting entsprechend einsetzen würde, mehrfach aufgerufen würde, würde ich sogar eigentlich erwarten.

Bei molilys Beispiel ging es ja nur darum, ob bei with() eine Funktion mehrfach aufgerufen wird.

Gut, aber das sagt ja wenig darüber aus, ob auch die Elementfindung jedes mal neu komplett durchlaufen würde oder nicht.

gruß,
wahsaga

[Christian Seiler]

Hallo wahsaga,

innerHTML zu erweitern, ist idR. eine Veränderung des DOM-Baumes (bzw. es ist nicht trivial und mit wenig Aufwand entscheidbar, ob es eine darstellt oder nicht).

Ok, das stimmt allerdings. Allerdings: Der Code ist mit einer Referenz sowieso besser lesbar und selbst wenn es bei allgemeinen Eigenschaften keinen Geschwindigkeitsvorteil bringt, ist es besser, sich von vorne herein den besseren Stil anzueignen, dann muss man sich nie überlegen, ob der jetzt technisch notwendig wäre, oder nicht.

Aber wenn's Dich wirklich interessiert: Schreib doch einen Testcase. :-)

Viele Grüße,
Christian

[Struppi]

Den Select Kontainer lasse ich mittels DOM erstellen, hier das Skript:

du machst viel zuviel.

}else if(art == "Select"){
   var newSelect = document.createElement("select");

Das ist ok, hier erzeugst du ein select Element, aber warum dann das:

var select_name = document.createAttribute("name");
   var select_id = document.createAttribute("id");
   var select_size = document.createAttribute("size");

Ein Select Element besitzt diese Attribute, du musst sie nicht erzeugen.

select_name.nodeValue = document.getElementById("text_name").value+i;
   select_id.nodeValue = document.getElementById("text_name").value+i;
   select_size.nodeValue = document.getElementById("text_size").value;

und das könntest du dann wesentlich übersichtlicher schreiben.

newSelect.name = document.getElementById("text_name").value + i;
newSelect.id = document.getElementById("text_name").value + i ;
newSelect.size = document.getElementById("text_size").value;

newSelect.setAttributeNode(select_name);
   newSelect.setAttributeNode(select_id);
   newSelect.setAttributeNode(select_size);
   //newSelect.setAttributeNode(select_option);

Und das fällt komplett weg.

Struppi.

[cr_man]

Nochmal vielen Dank für eure Antworten und Tipps. Gerade erst gesehen das noch welche hinzugekommen sind.

Da ich mich gerade in JS einarbeite bin ich für jeden wertvollen Tipp und Hinweis dankbar.

Danke und Gruß,
cr_man