Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl Sat, 08 Dec 07 12:12:56 Z https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189791?srt=yes#m1189791 https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189791?srt=yes#m1189791 <p>Hi allerseits,</p> <p>ich habe folgendes Problem mit einem per Javascript dynamisch erzeugten SELECT-Auswahlfeld: Das SELECT-Tag notiere ich in der XHTML-Datei wie folgt:</p> <p><select name="cssSelector" id="cssSelector"><br>   <option value="">Kein CSS-Selektor ausgewählt</option><br> </select></p> <p>Anschließend lese ich die Stylesheet-Informationen der Seite aus und erzeuge per Javascript für jeden CSS-Selektor ein OPTION-Tag in dem o.g. SELECT-Feld, in etwa so:</p> <p>while (cssSelector = document.styleSheets[0].cssRules[selectorCounter].selectorText) {<br>   if (cssSelector.match(/^./)) {<br>     cssSelector = cssSelector.replace(/^./, '');<br>     optionElement = new Option(cssSelector.toString(), cssSelector.toString());<br>     document.getElementById('cmtCSSSelector').appendChild(optionElement);<br>   }<br>   selectorCounter++;<br> }</p> <p>Das SELECT-Feld sieht in der XHTML-Seite auch sauber aus (ebenso, wenn ich es mir mit Firefox/ Firebug anschaue.<br> ALLERDINGS, und das ist die Krux, sobald ich den ausgewählten Wert des SELECT-Feldes per Javascript auslesen möchte, wird immer ein leerer String zurückgegeben, bzw. eben der Wert des ersten, schon im XHTML definierten OPTION-Feldes zurückgegeben.</p> <p>alert (document.getElementById('cssSelector').value)</p> <p>liefert immer einen leeren String, egal, was im SELECT-Feld ausgewählt wird.</p> <p>Auch kleine Tricks, wie ein:</p> <p>history.go(0);</p> <p>... nach dem dynamischen Erzeugen des SELECT-Feldes bringt keinen anderen Effekt.</p> <p>Hatte jemand schonmal ein ähnliches Problem (und vielleicht eine Lösung dazu ;-) )?</p> <p>Vielen Dank schonmal im voraus für Hilfe und schöne Grüße, Josef</p> Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl Sat, 08 Dec 07 14:02:45 Z https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189795?srt=yes#m1189795 https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189795?srt=yes#m1189795 <p>n'abend,</p> <blockquote> <p>optionElement = new Option(cssSelector.toString(), cssSelector.toString());</p> </blockquote> <p>hast du es hier mal (testweise) mit dem guten alten DOM versucht, wenn du das unten schon ansprichst?</p> <pre><code class="block language-javascript">optionElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span> <span class="token string">'option'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> optionElement<span class="token punctuation">.</span>value <span class="token operator">=</span> cssSelector<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> optionELement<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span> cssSelector<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>weiterhin schönen abend...</p> <div class="signature">-- <br> #selfhtml hat ein Forum?<br> sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:| </div> Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl Sat, 08 Dec 07 14:32:15 Z https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189792?srt=yes#m1189792 https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189792?srt=yes#m1189792 <p>Hellihello Josef,</p> <p>beisst sich da vielleicht das schon vorhanden Option-Feld mit den dynamisch erzeugten?</p> <p>test 1: fügste ein zweites Element im HTML-Baum vorab mit ein und schaust, dass du das "erwischt"<br> test 2: lässt du entweder html-Element ersetzen oder erzeugst die Options bzw. das komplette select per JS.</p> <blockquote> <p>ich habe folgendes Problem mit einem per Javascript dynamisch erzeugten SELECT-Auswahlfeld: Das SELECT-Tag notiere ich in der XHTML-Datei wie folgt:</p> <p><select name="cssSelector" id="cssSelector"><br>   <option value="">Kein CSS-Selektor ausgewählt</option><br> </select></p> <p>Anschließend lese ich die Stylesheet-Informationen der Seite aus und erzeuge per Javascript für jeden CSS-Selektor ein OPTION-Tag in dem o.g. SELECT-Feld, in etwa so:</p> <p>while (cssSelector = document.styleSheets[0].cssRules[selectorCounter].selectorText) {<br>   if (cssSelector.match(/^./)) {<br>     cssSelector = cssSelector.replace(/^./, '');<br>     optionElement = new Option(cssSelector.toString(), cssSelector.toString());<br>     document.getElementById('cmtCSSSelector').appendChild(optionElement);<br>   }<br>   selectorCounter++;<br> }</p> <p>Das SELECT-Feld sieht in der XHTML-Seite auch sauber aus (ebenso, wenn ich es mir mit Firefox/ Firebug anschaue.<br> ALLERDINGS, und das ist die Krux, sobald ich den ausgewählten Wert des SELECT-Feldes per Javascript auslesen möchte, wird immer ein leerer String zurückgegeben, bzw. eben der Wert des ersten, schon im XHTML definierten OPTION-Feldes zurückgegeben.</p> <p>alert (document.getElementById('cssSelector').value)</p> <p>liefert immer einen leeren String, egal, was im SELECT-Feld ausgewählt wird.</p> <p>Auch kleine Tricks, wie ein:</p> <p>history.go(0);</p> <p>... nach dem dynamischen Erzeugen des SELECT-Feldes bringt keinen anderen Effekt.</p> <p>Hatte jemand schonmal ein ähnliches Problem (und vielleicht eine Lösung dazu ;-) )?</p> </blockquote> <p>Dank und Gruß,</p> <p>frankx</p> Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl Sat, 08 Dec 07 14:54:13 Z https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189793?srt=yes#m1189793 https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189793?srt=yes#m1189793 <p>Grütze .. äh ... Grüße!</p> <blockquote> <p>beisst sich da vielleicht das schon vorhanden Option-Feld mit den dynamisch erzeugten?</p> <p>test 1: fügste ein zweites Element im HTML-Baum vorab mit ein und schaust, dass du das "erwischt"<br> test 2: lässt du entweder html-Element ersetzen oder erzeugst die Options bzw. das komplette select per JS.</p> </blockquote> <p>Ja, "Option"-Elemente an ein vorhandenes Select anfügen ist unzuverlässig, diese Erfahrung habe ich auch gemacht. Wenn der OP keine Einträge im Select hat, die auch ohne Javascript verwendet werden, würde ich ihm auf jeden Fall zu deiner Variante 2 raten, da ansonsten ein leeres Select-Element ohne Funktionalität vorhanden ist.</p> <p>Ansonsten: Alle Option-Elemente des Selects per JS entfernen, evtl. vorher vorhandene Einträge zwischenspeichern und danach die option Elemente komplett neu aufbauen</p> <p>Cü<br> Kai</p> <div class="signature">-- <br> What is the difference between Scientology and Microsoft? One is an<br> evil cult bent on world domination and the other was begun by L. Ron<br> Hubbard.<br> ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:| </div> Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl Sat, 08 Dec 07 18:34:01 Z https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189794?srt=yes#m1189794 https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189794?srt=yes#m1189794 <p>Hi allerseits,</p> <blockquote> <p>Ja, "Option"-Elemente an ein vorhandenes Select anfügen ist unzuverlässig,</p> </blockquote> <p>... jou, das habe ich nun auch festgestellt, denn nachdem ich nun das Selectfeld komplett in Javascript erzeugte, funktioniert es auch.</p> <p>Sowohl Versuche, Option-Elemente mit den DOM-Methoden (createElement, appendChild) anzufügen, als auch mit PrototypeJS (insert(element)) brachten keine Lösung, wenn das Select-Feld im XHTML schon da war und man "nur" Option-Elemente hinzufügen wollte. Scheint nicht zu gehen.</p> <p>Thanx für die Hilfen und nen schönen Abend, Josef</p> Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl Sat, 08 Dec 07 14:41:12 Z https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189796?srt=yes#m1189796 https://forum.selfhtml.org/self/2007/dec/8/dynamisch-erzeugtes-select-feld-liefert-keine-werte-bei-auswahl/1189796?srt=yes#m1189796 <p>Hai,</p> <p>teste doch einfach mal mit dieser Funktion(s.u.) ob das Select-Feld auch wirklich Werte enthaelt:</p> <pre><code class="block language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/JavaScript"</span><span class="token operator">></span> <span class="token keyword">var</span> iX <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token keyword">var</span> oX <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">var</span> mssg <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">var</span> valu <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">var</span> text <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">var</span> chck <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">checkmal</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> mssg <span class="token operator">=</span> <span class="token string">'Elemente:\t['</span> <span class="token operator">+</span> iX <span class="token operator">+</span> <span class="token string">']\n'</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>iX<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span> type <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type<span class="token punctuation">;</span> mssg <span class="token operator">+=</span> i <span class="token operator">+</span> <span class="token string">'. '</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'\t'</span> <span class="token operator">+</span> type <span class="token operator">+</span> <span class="token string">'\n'</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'select'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> oX <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span>o<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> o<span class="token operator"><</span>oX<span class="token punctuation">;</span> o<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> text <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">[</span>o<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token punctuation">;</span> valu <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">[</span>o<span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> chck <span class="token operator">=</span> document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">[</span>o<span class="token punctuation">]</span><span class="token punctuation">.</span>selected<span class="token punctuation">;</span> mssg <span class="token operator">+=</span> <span class="token string">'\t'</span> <span class="token operator">+</span> o <span class="token operator">+</span> <span class="token string">'. ('</span> <span class="token operator">+</span> chck <span class="token operator">+</span> <span class="token string">')\t"'</span> <span class="token operator">+</span> valu <span class="token operator">+</span> <span class="token string">'"\t'</span> <span class="token operator">+</span> text <span class="token operator">+</span> <span class="token string">'\t\n'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">alert</span><span class="token punctuation">(</span>mssg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>Zum Testen einfach ins HTML einen Link einbauen:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript:checkmal();<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>checkmal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></p> <p>Dann hast Du erst mal einen Anhaltspunkt und stocherst nicht im Nebel rum.</p> <p>Gruss Norbert</p>