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
liste.valueder Wert des value Attributsliste.selectedIndexder ausgwählte Indexliste.options[0].textals id kann man liste.selectedIndex eingeben, um das ausgwählte options Element zu erhaltenliste.items[0]Auch items ist ein Objekt welches alle Elemente der Auswahlliste enthält.liste.selectedOptionsein Objekt welches alle ausgewählten Options Elemente enthält
Zugriff auf das ausgewählte options Element
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
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
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
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
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
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>
