Option unterhalb von Optgroup

[Aline]

Hi

wie kann ich per JavaScript eine Option einer bestimmten Optgroup anhängen?

im Moment habe ich folgenden Code

var optGrps = opt.getElementsByTagName("optgroup");  
for (var i = 0; i < optGrps.length; i++){  
  if(optGrps[k].label == "Test"){  
    optGrps[k].appendChild = new Option("Test1", "Test1", true, true);  
  }  
}

jedoch wird die neue Option nicht unterhalb der Optgroup Test, sondern unterhalb der darauf folgenden Optgroup eingefügt.
Wo ist mein Denkfehler?

Wie kann ich die den Wert (value) von der ersten Option unterhalb der Optgroup Test abfragen?

Aline

[ChrisB]

Hi,

if(optGrps[k].label == "Test"){
    optGrps[k].appendChild = new Option("Test1", "Test1", true, true);

jedoch wird die neue Option nicht unterhalb der Optgroup Test, sondern unterhalb der darauf folgenden Optgroup eingefügt.
Wo ist mein Denkfehler?

Ich weiss nicht, ob sich die Erstellung einer neuen Option mittels new Option(...) und appendChild so "vertragen".

Wie sieht es denn aus, wenn du das OPTION-Element per document.createElement erstellst, ihm seine Attribute verpasst, und dann das mit appendChild einfügst?

Wie kann ich die den Wert (value) von der ersten Option unterhalb der Optgroup Test abfragen?

Du kannst dich mit firstChild und ggf. nextSibling dahin hangeln (Problematik eventueller Whitespace-Textknoten zwischen den Elementen beachten), oder unterhalb der Referenz auf das OPTGROUP-Element nochmals getElementsByTagName("option") anwenden, und dann auf die erste davon zugreifen.

MfG ChrisB

[EKKi]

Mahlzeit Aline,

im Moment habe ich folgenden Code

var optGrps = opt.getElementsByTagName("optgroup");

for (var i = 0; i < optGrps.length; i++){
  if(optGrps[k].label == "Test"){
    optGrps[k].appendChild = new Option("Test1", "Test1", true, true);
  }
}

  
Wie kommst Du auf die Idee, es könnte sinnvoll sein, den Rückgabewert bei der Erstellung einer neuen Option als Eigenschaft an ein Objekt anzuhängen, anstatt einfach die Methode <http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild()> aufzurufen?  
  
  

> Wo ist mein Denkfehler?  
  
Du benutzt die o.g. Methode nicht (korrekt) - siehe Beispiel.  
  
  
MfG,  
EKKi  

-- 
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

[ChrisB]

Hi,

optGrps[k].appendChild = new Option("Test1", "Test1", true, true);

Wie kommst Du auf die Idee, es könnte sinnvoll sein, den Rückgabewert bei der Erstellung einer neuen Option als Eigenschaft an ein Objekt anzuhängen, anstatt einfach die Methode http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild() aufzurufen?

Du benutzt die o.g. Methode nicht (korrekt) - siehe Beispiel.

Autsch, das war mir gar nicht aufgefallen ...

MfG ChrisB

[Aline]

Hi!

da ist mir ein Fehler beim abtippen passiert :(

var optGrps = opt.getElementsByTagName("optgroup");  
for (var i = 0; i < optGrps.length; i++){  
  if(optGrps[k].label == "Test"){  
    optGrps[k].appendChild(new Option("Test1", "Test1", true, true));  
  }  
}

Firefox 3.0.12 (Linux), Firefox 3.0.10 (Windows) und Firefox 3.5.1 (Windows) tun das, was ich erwarte
Opera 9.64 (Linux und Windows): hat das beschriebene Verhalten
Internet Explorer 7.0.5730.13 (Windows) und Internet Explorer 8.0.6001.18702 (Windows): die Elemente werden an der richtigen Stelle eingefügt, jedoch ohne Text

Aline

[Aline]

Hi!

auch wenn ich es so versuche, ändert sich leider nichts am Verhalten

var optGrps = opt.getElementsByTagName("optgroup");  
var newOption = document.createElement("option");  
newOption.value = "Test1";  
newOption.text = "Test1";  
for (var i = 0; i < optGrps.length; i++){  
  if(optGrps[i].label == "Test"){  
    optGrps[i].appendChild(newOption);  
  }  
}

Aline

[ChrisB]

Hi,

auch wenn ich es so versuche, ändert sich leider nichts am Verhalten

var optGrps = opt.getElementsByTagName("optgroup");

var newOption = document.createElement("option");
newOption.value = "Test1";
newOption.text = "Test1";
for (var i = 0; i < optGrps.length; i++){
  if(optGrps[i].label == "Test"){
    optGrps[i].appendChild(newOption);
  }
}

  

> Internet Explorer 7.0.5730.13 (Windows) und Internet Explorer 8.0.6001.18702 (Windows): die Elemente werden an der richtigen Stelle eingefügt, jedoch ohne Text  
  
Der IE ist immer leicht bitchy beim Erstellen neuer Formularelemente.  
  
Wenn du  

> newOption.text = "Test1";  

durch  
`newOption.appendChild(document.createTextNode("Test1"));`{:.language-javascript}  
ersetzt, bekommst du auch im IE eine Option mit dem gewünschten Textinhalt.  
  
  

> Opera 9.64 (Linux und Windows): hat das beschriebene Verhalten  
  
Auch lustig - eine Kontrollausgabe des innerHTML der OPTGROUP direkt nach dem appendChild zeigt an, dass die neue Option korrekt dort eingehängt wurde - und trotzdem zeigt er sie im nächsten OPTGROUP-Element \*an\*.  
  
Um das zu beheben, kannst du hinter der appendChild-Zeile noch  
`if(window.opera) optGrps[i].innerHTML = optGrps[i].innerHTML;`{:.language-javascript}  
einfügen - einfach dem OPTGROUP-Element, dem die neue Option gerade angehängt wurde, sein eigenes innerHTML noch mal überbraten. Dann zeigt auch Opera die Option in der "richtigen" OPTGROUP an, und nicht mehr in der nachfolgenden.  
  
Natürlich kein besonders schöner Workaround, aber was will man machen :-)  
Musst nur aufpassen - eventuell gesetzte Eventhandler o.ä. gehen dir verloren, wenn du innerHTML überschreibst. (Aber die nutzt man auf OPTION ja generell eher selten.)  
  
  
MfG ChrisB  
  

-- 
Light travels faster than sound - that's why most people appear bright until you hear them speak.

[Aline]

Hi,

auch wenn ich es so versuche, ändert sich leider nichts am Verhalten

var optGrps = opt.getElementsByTagName("optgroup");

var newOption = document.createElement("option");
newOption.value = "Test1";
newOption.text = "Test1";
for (var i = 0; i < optGrps.length; i++){
  if(optGrps[i].label == "Test"){
    optGrps[i].appendChild(newOption);
  }
}

>   
> > Internet Explorer 7.0.5730.13 (Windows) und Internet Explorer 8.0.6001.18702 (Windows): die Elemente werden an der richtigen Stelle eingefügt, jedoch ohne Text  
>   
> Der IE ist immer leicht bitchy beim Erstellen neuer Formularelemente.  
>   
> Wenn du  
> > newOption.text = "Test1";  
> durch  
> `newOption.appendChild(document.createTextNode("Test1"));`{:.language-javascript}  
> ersetzt, bekommst du auch im IE eine Option mit dem gewünschten Textinhalt.  
>   
>   
> > Opera 9.64 (Linux und Windows): hat das beschriebene Verhalten  
>   
> Auch lustig - eine Kontrollausgabe des innerHTML der OPTGROUP direkt nach dem appendChild zeigt an, dass die neue Option korrekt dort eingehängt wurde - und trotzdem zeigt er sie im nächsten OPTGROUP-Element \*an\*.  
>   
> Um das zu beheben, kannst du hinter der appendChild-Zeile noch  
> `if(window.opera) optGrps[i].innerHTML = optGrps[i].innerHTML;`{:.language-javascript}  
> einfügen - einfach dem OPTGROUP-Element, dem die neue Option gerade angehängt wurde, sein eigenes innerHTML noch mal überbraten. Dann zeigt auch Opera die Option in der "richtigen" OPTGROUP an, und nicht mehr in der nachfolgenden.  
>   
> Natürlich kein besonders schöner Workaround, aber was will man machen :-)  
> Musst nur aufpassen - eventuell gesetzte Eventhandler o.ä. gehen dir verloren, wenn du innerHTML überschreibst. (Aber die nutzt man auf OPTION ja generell eher selten.)  
  
  
super vielen Dank!  
  
jedoch verhindert der Workaround von Opera, dass das selektieren mit "newOption.selected = true;" nicht funktioniert.  
  
Lasse ich den Workaround weg, wird der Eintrag selektiert.  
Hast du dafür auch noch ein Tipp?  
  
Aline

[ChrisB]

Hi,

bitte nicht sinnlos alles zitieren!

jedoch verhindert der Workaround von Opera, dass das selektieren mit "newOption.selected = true;" nicht funktioniert.

Mit doppelter Verneinung kann nicht jeder nicht umgehen :-)

Lasse ich den Workaround weg, wird der Eintrag selektiert.
Hast du dafür auch noch ein Tipp?

Und wenn du danach noch mal die select-Eigenschaft der Option über die options-Collection setzt?

MfG ChrisB

[Aline]

Hi,

bitte nicht sinnlos alles zitieren!

jedoch verhindert der Workaround von Opera, dass das selektieren mit "newOption.selected = true;" nicht funktioniert.

Mit doppelter Verneinung kann nicht jeder nicht umgehen :-)

ich versteh nicht so ganz, wass du mir damit sagen willst :-)

Lasse ich den Workaround weg, wird der Eintrag selektiert.
Hast du dafür auch noch ein Tipp?

Und wenn du danach noch mal die select-Eigenschaft der Option über die options-Collection setzt?

ich muss erstmal schauen, wie ich das letzte option Element in der optgroup ermitteln kann, damit ich es erneut selektieren kann

Aline

[Der Martin]

Hallo,

jedoch verhindert der Workaround von Opera, dass das selektieren mit "newOption.selected = true;" nicht funktioniert.
Mit doppelter Verneinung kann nicht jeder nicht umgehen :-)
ich versteh nicht so ganz, wass du mir damit sagen willst :-)

ganz einfach: Du sagst: "... verhindert der Workaround von Opera, dass [...] nicht funktioniert." Wenn er verhindert, dass es nicht funktioniert, bewirkt er also, dass es funktioniert?

Du meintest sicher: "... verhindert der Workaround von Opera, dass [...] funktioniert."
Doppelte Verneinung will eben gelernt sein. ;-)

Noch besser fand ich den Satz, den ich vor Jahren mal in englischer Sprache aufgeschnappt habe. Kein Double, nein, sogar ein Triple Negative: "Nobody ain't gonna blame you for nothin'".

Ciao,
 Martin