J.Hahn: Dynamisch erzeugtes Select-Feld liefert keine Werte bei Auswahl

Hi allerseits,

ich habe folgendes Problem mit einem per Javascript dynamisch erzeugten SELECT-Auswahlfeld: Das SELECT-Tag notiere ich in der XHTML-Datei wie folgt:

<select name="cssSelector" id="cssSelector">
  <option value="">Kein CSS-Selektor ausgewählt</option>
</select>

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:

while (cssSelector = document.styleSheets[0].cssRules[selectorCounter].selectorText) {
  if (cssSelector.match(/^./)) {
    cssSelector = cssSelector.replace(/^./, '');
    optionElement = new Option(cssSelector.toString(), cssSelector.toString());
    document.getElementById('cmtCSSSelector').appendChild(optionElement);
  }
  selectorCounter++;
}

Das SELECT-Feld sieht in der XHTML-Seite auch sauber aus (ebenso, wenn ich es mir mit Firefox/ Firebug anschaue.
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.

alert (document.getElementById('cssSelector').value)

liefert immer einen leeren String, egal, was im SELECT-Feld ausgewählt wird.

Auch kleine Tricks, wie ein:

history.go(0);

... nach dem dynamischen Erzeugen des SELECT-Feldes bringt keinen anderen Effekt.

Hatte jemand schonmal ein ähnliches Problem (und vielleicht eine Lösung dazu ;-) )?

Vielen Dank schonmal im voraus für Hilfe und schöne Grüße, Josef

  1. n'abend,

    optionElement = new Option(cssSelector.toString(), cssSelector.toString());

    hast du es hier mal (testweise) mit dem guten alten DOM versucht, wenn du das unten schon ansprichst?

    optionElement = document.createElement( 'option' );  
    optionElement.value = cssSelector.toString();  
    optionELement.appendChild( document.createTextNode( cssSelector.toString() ) );
    

    weiterhin schönen abend...

    --
    #selfhtml hat ein Forum?
    sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
    1. Hai,

      teste doch einfach mal mit dieser Funktion(s.u.) ob das Select-Feld auch wirklich Werte enthaelt:

      <script type="text/JavaScript">  
      var iX = document.forms[0].elements.length;  
      var oX = 0;  
      var mssg = '';  
      var name = '';  
      var type = '';  
      var valu = '';  
      var text = '';  
      var chck = '';  
      function checkmal() {  
          mssg = 'Elemente:\t[' + iX + ']\n';  
          for(i=0; i<iX; i++) {  
              name = document.forms[0].elements[i].name;  
              type = document.forms[0].elements[i].type;  
              mssg += i + '. ' + name + '\t' + type + '\n';  
              if (type.substr(0,6) == 'select') {  
                  oX = document.forms[0].elements[i].options.length;  
                  for(o=0; o<oX; o++) {  
                      text = document.forms[0].elements[i].options[o].text;  
                      valu = document.forms[0].elements[i].options[o].value;  
                      chck = document.forms[0].elements[i].options[o].selected;  
                      mssg += '\t' + o + '. (' + chck + ')\t"' + valu + '"\t' + text + '\t\n';  
                  }  
              }  
          }  
          alert(mssg);  
      }  
      </script>
      

      Zum Testen einfach ins HTML einen Link einbauen:
      <a href="JavaScript:checkmal();">checkmal</a>

      Dann hast Du erst mal einen Anhaltspunkt und stocherst nicht im Nebel rum.

      Gruss Norbert

  2. Hellihello Josef,

    beisst sich da vielleicht das schon vorhanden Option-Feld mit den dynamisch erzeugten?

    test 1: fügste ein zweites Element im HTML-Baum vorab mit ein und schaust, dass du das "erwischt"
    test 2: lässt du entweder html-Element ersetzen oder erzeugst die Options bzw. das komplette select per JS.

    ich habe folgendes Problem mit einem per Javascript dynamisch erzeugten SELECT-Auswahlfeld: Das SELECT-Tag notiere ich in der XHTML-Datei wie folgt:

    <select name="cssSelector" id="cssSelector">
      <option value="">Kein CSS-Selektor ausgewählt</option>
    </select>

    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:

    while (cssSelector = document.styleSheets[0].cssRules[selectorCounter].selectorText) {
      if (cssSelector.match(/^./)) {
        cssSelector = cssSelector.replace(/^./, '');
        optionElement = new Option(cssSelector.toString(), cssSelector.toString());
        document.getElementById('cmtCSSSelector').appendChild(optionElement);
      }
      selectorCounter++;
    }

    Das SELECT-Feld sieht in der XHTML-Seite auch sauber aus (ebenso, wenn ich es mir mit Firefox/ Firebug anschaue.
    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.

    alert (document.getElementById('cssSelector').value)

    liefert immer einen leeren String, egal, was im SELECT-Feld ausgewählt wird.

    Auch kleine Tricks, wie ein:

    history.go(0);

    ... nach dem dynamischen Erzeugen des SELECT-Feldes bringt keinen anderen Effekt.

    Hatte jemand schonmal ein ähnliches Problem (und vielleicht eine Lösung dazu ;-) )?

    Dank und Gruß,

    frankx

    1. Grütze .. äh ... Grüße!

      beisst sich da vielleicht das schon vorhanden Option-Feld mit den dynamisch erzeugten?

      test 1: fügste ein zweites Element im HTML-Baum vorab mit ein und schaust, dass du das "erwischt"
      test 2: lässt du entweder html-Element ersetzen oder erzeugst die Options bzw. das komplette select per JS.

      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.

      Ansonsten: Alle Option-Elemente des Selects per JS entfernen, evtl. vorher vorhandene Einträge zwischenspeichern und danach die option Elemente komplett neu aufbauen


      Kai

      --
      What is the difference between Scientology and Microsoft? One is an
      evil cult bent on world domination and the other was begun by L. Ron
      Hubbard.
      ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
      1. Hi allerseits,

        Ja, "Option"-Elemente an ein vorhandenes Select anfügen ist unzuverlässig,

        ... jou, das habe ich nun auch festgestellt, denn nachdem ich nun das Selectfeld komplett in Javascript erzeugte, funktioniert es auch.

        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.

        Thanx für die Hilfen und nen schönen Abend, Josef