Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie ändere ich die Optionen eines SELECT-Feldes dynamisch?

Die vorgegebenen Select-Optionen lassen sich in JavaScript über ihren Index ansprechen. Der Index beginnt bei 0. Betrachten wir folgendes Select-Element:

   <FORM NAME="formular">
   <SELECT NAME="auswahl">
   <OPTION VALUE="a0" selected>Bitte wählen:
   <OPTION VALUE="a1">Auswahl1
   <OPTION VALUE="a2">Auswahl2
   <OPTION VALUE="a3">Auswahl3
   </SELECT>
   </FORM>

Die folgende Funktion reset() setzt die Selectbox wieder auf ihren Ursprungszustand ("Bitte wählen:") zurück.

   function resetOp() {
    document.formular.auswahl.selectedIndex = 0;
   }

Ein andere Idee hierzu wäre das "halbautomatische Weiterschalten" der Optionen. Hierzu wird der aktuelle Index bestimmt und der jeweils nächste dann angezeigt.

   function nextOp() {
    var next;
    var akt = document.formular.auswahl.selectedIndex;
    /* Sind wir schon am Ende? Dann wieder von vorne beginnen. */
    if (akt == document.formular.auswahl.length-1) next = 0;
    /* Sonst einfach den naechsten nehmen */
    else next = akt+1;
    document.formular.auswahl.selectedIndex = next;
   }

Nun läßt sich allerdings nicht nur die Option bestimmen, die angezeigt werden soll, sondern man kann auch die Texte einer Option dynamisch ändern. Folgende Funktion tut dies ganz stupide für alle Einträge:

   function changeOp() {
    for (var i=1; i < document.formular.auswahl.length; i++) {
     document.formular.auswahl[i].text = 'Eintrag'+i;
    }
   }

So "richtig dynamisch" wird es aber erst, wenn man via JavaScript Optionen hinzufügt oder löscht. Dazu erzeugt man zuerst ein Object des Types Option und fügt es dann an das Select-Element an. Gelöscht wird, indem man den entsprechenden Index auf null setzt.

   function addOp(position, text, wert) {
    var addme = new Option(text, wert);
    document.formular.auswahl[position] = addme;
   }

   function delOp(nr) {
    document.formular.auswahl[nr] = null;
   }

Wer die obigen Ausführungen ausprobieren möchte, kann mit dem folgendem Formular herumspielen:



top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Tobe Toben (©) und zuletzt bearbeitet von Christine Kühnel.

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel