Select Elemente Auswahllisten <seclect><option>

Die Auswahlliste ist ein Formularelement welches mittels dem HTML Element select erzeugt wird. Die Werte der Auswahlliste werden mit option Elementen definiert.

<select id="kleidung" >
    <option value="Hemd">Hemd
    <option value="Hose">Hose
    <option value="Rock">Rock
    <option value="Bluse">Bluse
</select>

Die wichtigsten Eigenschaften einer Select Liste sind

Zugriff auf das ausgewählte options Element

Beispiel

In diesem Beispiel gibt es eine Liste mit der id="mySelect". Ein p-Textabsatz mit der id="output". wird Das dient als Textausgabe. Das Ereignis change wird ausgelöst, wenn man ein Element auswählt.

Javascript

        var liste = document.getElementById("mySelect");
        let output = document.getElementById("output");
        liste.addEventListener("change", showSelected);

        function showSelected(evt) {
            var slValue = liste.value;
            var slId = liste.selectedIndex;
            var slText = liste.options[slId].text;
            output.innerHTML = "value: " + slValue + "Index: " + slId + " text: " + slText;
        }

Einer Auswahlliste Elemente hinzufügen

Beispiel

In diesem Beipspiel gibt es eine Select Liste mit der id="farbe". Der Button id="btn" fügt 3 Elemente hinzu.

        var select = document.getElementById("farbe");
        var btn = document.getElementById("btn");
        btn.addEventListener("click" setOption)

        function setOption() {
           var option = document.createElement("option");
            option.innerHTML = "gelb";
            option.value = 23423;
            select.appendChild(option);
            option = document.createElement("option");
            option.innerHTML = "lila";
            option.value = 54232;
            select.appendChild(option);
        }

 

Auswahl abhängige Select Listen durch ein-ausblenden zusätzlicher Listen

Beispiel

Wählt man in der ersten Liste ein Produkt, erscheinen in der zweiten Liste die Produkteigenschaften.

In diesem Beispiel gibt es zusätzlich zur Hauptauswahlliste 2 weitere Listen, die abhängig von der Auswahl ein oder ausgeblendet werden.

HTML

<select id="kleidung" onchange="myFunction()">
<option value="Hemd">Hemd
<option value="Bluse">Bluse
<option value="Rock">Rock
<option value="Hose">Hose
</select>
<select id="farbe1">
<option>rot</option>
<option>grün</option>
<option>blau</option>
<option>orange</option>
</select>
<select id="farbe2">
<option>lila</option>
<option>rosa</option>
<option>türkis</option>
<option>gelb</option>
</select>

Javascript

        var option;
        function myFunction() {
            var k = document.getElementById("kleidung").selectedIndex;
            if (k < 2) {
                document.getElementById('farbe1').style.display = "none";
                document.getElementById('farbe2').style.display = "inline";
            } else {
                document.getElementById('farbe1').style.display = "inline";
                document.getElementById('farbe2').style.display = "none";
            }
        }

Auswahl abhängige Listen durch Ändern der Werte einer zweiten Liste

Beispiel

Dieses Beispiel funktioniert im Frontend genauso wie das vorige die Programmierung ist jedoch eine andere. Abhängig von der Auswahl der ersten Liste werden in der zweiten Liste unterschiedliche Werte angzeigt.

HTML

<select id="kleidung">
<option value="1">Hemd
<option value="1">Hose
<option value="2">Rock
<option value="2">Bluse
</select>
<select id="farbe">
<option>rot</option>
<option>grün</option>
<option>blau</option>
</select>

Javascript

        document.getElementById("kleidung").addEventListener("change",setOption);

        function setOption() {
            var k = document.getElementById("kleidung").selectedIndex;
            if (k < 2) {
                document.getElementById('farbe').options[0].text = "rot";
                document.getElementById('farbe').options[1].text = "grün";
                document.getElementById('farbe').options[2].text = "blau";
            } else {
                document.getElementById('farbe').options[0].text = "gelb";
                document.getElementById('farbe').options[1].text = "rosa";
                document.getElementById('farbe').options[2].text = "lila";
            }
        }

Auswahl abhängige Select Listen durch Ändern der Werte und Anzahl einer zweiten Liste

Beispiel

In diesem Beispiel ändern sich nicht nur die Werte einer zweiten Liste sondern auch die Anzahl. Außerdem werden hier die Werte mit einer switch-case Anweisung hinzugefügt. Dadurch kann man für jeden einzelnen Wert andere Werte zuweisen.

HTML

<select id="kleidung">
<option value="0">Bitte wählen</option>
<option value="1">Hemd
<option value="1">Hose
<option value="2">Rock
<option value="2">Bluse
</select>
<select id="farbe">
</select>

Javascript

var kleidung = document.getElementById("kleidung");
kleidung.addEventListener("change",setOption);
function setOption() {
    var farbe = document.getElementById('farbe');
    var k_id = kleidung.selectedIndex;
   
    switch (k_id) {

    case 0 :       
            farbe.length = 0;
    break;

    case 1:
     farbe.length = 4;
            farbe.options[0].text = "rot";
            farbe.options[1].text = "grün";
            farbe.options[2].text = "blau";
            farbe.options[3].text = "weiß";
    break;

    case  2 :

            farbe.length = 4;
            farbe.options[0].text = "blau";
            farbe.options[1].text = "grün";
            farbe.options[2].text = "grau";
            farbe.options[3].text = "schwarz";
    break;

    default : 
            farbe.length = 4;
            farbe.options[0].text = "rot";
            farbe.options[1].text = "grün";
            farbe.options[2].text = "blau";
            farbe.options[3].text = "weiß";
    }   
}

Auswahliste mit Mehrfachauswahl auslesen

siehe Beispiel

Mit der Eigenschaft selectedOptions bekommt man eine Liste alle ausgewählten Options Elemente geliefert. Diese kann man dann in einer for Schleife abfragen und sich die Eigenschaften text und value ausgeben lassen.

<select name="order" id="order" multiple size="4">
<option value="P001">Pizza Margerita</option>
<option value="P002">Pizza Salami</option>
<option value="P003">Pizza Tonno</option>
<option value="P004">Pizza Hawai</option>
<option value="P005">Pizza Pesci</option>
</select>
<p id="message"></p>
<script>
let message = document.getElementById("message");
let order = document.getElementById("order");
order.addEventListener("change", getOrder);
function getOrder(){
message.innerHTML = "";
let options = this.selectedOptions;
for(let i= 0; i < options.length; i++) {
message.innerHTML += options[i].text + " / " + options[i].value +"<br>";
}
}
</script>


 

Javascript Tipps