JavaScript - Umgang mit Selectboxen

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert den Umgang mit einer Selectbox. Das Formular hat den Namen demo bekommen, die Selectbox den Namen waehler und das Ausgabefeld den Namen anzeige.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Spezifikation if-else-Unterscheidung] [Objektreferenz elements] [Objektreferenz options]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

function ausgabe()
     /* Funktion uebertraegt Auswahltext in Textfeld */
{
     /* Auswahlindex der Selectbox ermitteln: */
  var number=document.demo.waehler.selectedIndex;
  if ((number<0)||(number>=document.demo.waehler.options.length))
     /* wenn Auswahlindex im ungueltigen Bereich */
  {
    document.demo.anzeige.value="keine Auswahl";
     /* "keine Auswahl" in Textfeld schreiben */
  }
  else
     /* ansonsten*/
  {
     /* Auswahltext ermitteln : */
    var Text=document.demo.waehler.options[number].text;
     /* Auswahltext in Textfeld uebertragen : */
    document.demo.anzeige.value=Text;
  }
}

function nummern()
     /* Funktion schreibt Nummern in Auswahlliste */
{
     /* Eintraege setzen : */
  document.demo.waehler.options[0]=new Option("erstens");
  document.demo.waehler.options[1]=new Option("zweitens");
  document.demo.waehler.options[2]=new Option("drittens");
     /* Laenge festsetzen : */
  document.demo.waehler.options.length=3;
     /* Ausgabe anpassen : */
  ausgabe();
}

function buchstaben()
     /* Funktion schreibt "griechische Buchstaben" in Auswahlliste */
{
     /* Eintraege setzen : */
  document.demo.waehler.options[0]=new Option("alpha");
  document.demo.waehler.options[1]=new Option("beta");
  document.demo.waehler.options[2]=new Option("gamma");
  document.demo.waehler.options[3]=new Option("delta");
  document.demo.waehler.options[4]=new Option("epsilon");
  document.demo.waehler.options[5]=new Option("zeta");
  document.demo.waehler.options[6]=new Option("eta");
     /* Laenge festsetzen : */
  document.demo.waehler.options.length=7;
     /* Ausgabe anpassen : */
  ausgabe();
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="buchstaben();">

<a href="select.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf select.html -->

<br>
<br>
<br>
<form name="demo">  <!-- HTML-Formular definieren -->

<select name="waehler" size="8" onChange="ausgabe();" width="200">
</select>
  <!-- Dies ist die erstmal leere Selectbox -->

<br>

<input type=text name="anzeige" value="" size="15" readonly>
  <!-- Dies ist das Textfeld -->

<br>
<br>

<input type=button value="nummern" onClick="nummern();" width="200">
  <!-- Dies ist der nummern-Button -->

<br>

<input type=button value="buchstaben" onClick="buchstaben();" width="200">
  <!-- Dies ist der buchstaben-Button -->

</form> <!-- HTML-Formular beenden -->
</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner