Javascript for select element

Javascript select-Element und option

select-option

select-Listen oder Drop-Down-Menüs sind Formular-Element, die vom typischen Schema der input-Elemente abweichen, und haben eigene Objekte und Methoden. In dynamischen Anwendungen liefert die Anwendung auf dem Server Auswahllisten z.B. als JSON und überläßt Javascript den Aufbau und die Handhabung der Liste.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

select-Elemente – Wert der Option

Da die Optionen eines Select-Elements durch option-Tags dargestellt werden, können sie mit querySelectorAll() als Sammlung erfasst werden. Die Anzahl der Optionen ist die Länge der Sammlung.

selectList.innerHTML = document.querySelectorAll("option").length;

Wenn die Select-Liste in einer Anwendung auf dem Server erzeugt und als Name / Wertpaar geliefert wurden, erzeugt Javascript eine select-Liste wie auch andere Elemente:

const produkt = 
[	{ "value": "pid1727", "name": "Tafel Schokolade"},
	{ "value": "pid1422", "name": "Müsliriegel Traube-Nuss"},
	{ "value": "pid1200", "name": "Waffeln Belgische Art"},
	{ "value": "pid0722", "name": "Pralinenmischung"}
];

const selection = document.createElement ("select");
for (const item of produkt) {
	const option = document.createElement ("option");
	option.value = item.value;
	option.text = item.name;
	selection.append (option)
}
console.log ("selection", selection);

Die Attribute von HTML-select-Elementen weichen von den typischen Attributen der input-Elemente ab und haben ihr eigenes Ökosystem.

autofocus
Gibt zurück, ob eine Drop-Down-Liste beim Laden der automatisch in den Fokus kommen soll oder setzt den Autofokus.
disabled
Gibt zurück, ob eine Drop-Down-Liste deaktivert (disabled) sein soll oder deaktiviert die Drop-Down-List.
form
Referenz auf das Formular, das die Drop-Down-Liste enthält.
length
Gibt die Zahl der option-Elemente der Liste zurück.
multiple
Gibt zurück, ob mehr als eine Option gewählt werden kann oder erlaubt die Wahl mehrerer Optionen.
name
name-Attribut des select-Elements.
selectedIndex
Index der aktiven Option der Liste.
selectedOptions
Gibt die aktuell gewählten Optionen als Array zurück.
size
Sets or returns the value of the size of a drop-down list.
type
Gibt den Typ des Formular-Elements zurück.
value
Gibt den Wert der gewählten Option zurück oder setzt den Wert.

Methoden

Dementsprechend haben select-Objekte spezielle Methoden, um option-Elemente hinzufügen oder zu löschen.

add ()
Fügt der Liste ein option-Element hinzu
remove ()
Entfernt ein option-Element aus der Liste
checkValidity ()
Prüft, ob das select-Objekt korrekt ist

select-Eingaben prüfen

Das Ändern einer select-Option erzeugt ein onchange-Event. Muss ich ein Select überhaupt prüfen? Immerhin kann der Benutzer hier nichts Falsches eingeben.

U.U. ändert die gewählte Option allerdings die weiteren Aktionen. Bei einer Bestellung »Haferflocken« kann im Anschluss nach der Menge in Gramm gefragt werden, bei der Bestellung »Mohnbrötchen« nach der Stückzahl.

<select id="choice">
   <option value="Haferflocken">Haferflocken</option>
   <option value="Müsli">Müsli</option>
   …
</select>
…
document.querySelector("#choice").onchange = function () {
   let msg = document.querySelector("#choice").value;
}

selectedIndex

Wenn nur die Position der ausgewählten Option erforderlich ist, reicht schon selectedIndex.

document.querySelector("#choice").onchange = function () {
	console.log (this.selectedIndex)
}

Select mit mehreren Optionen

select-Elemente, die gleich mehrere Optionen bereitstellen, kommen in freier Wildbahn selten vor. Dem Benutzer muss erklärt werden, dass er durch die Liste scrollen kann und die ALT- oder CMD-Taste gedrückt halten muss, um mehrere Optionen zu wählen. Darüber hinaus ist ein weitere Klick nötig, der die Auswahl abschließt. Checkboxen anstelle eines Select-Dropdown sind übersichtlicher, solange die Zahl der Optionen nicht zu groß ist.

const result = [];
const options = document.querySelector("#multi") && document.querySelector("#multi").options;

document.querySelector ("button#multiCheck").addEventListener ("click", function () {
	document.querySelector (".multiResult").innerHTML = "<ol>";
	for (const o of options) {
		if (o.selected) {
			result.push (o.value || o.text);
			document.querySelector (".multiResult").innerHTML += `<li> ${o.text} </li>`;
		}
	}
	document.querySelector (".multiResult").innerHTML += "</ol>";
});

selectedOptions

Äquivalent zu selectedIndex gibt es selectedOptions.

document.getElementById("multi").onclick = function() {
	console.log ( Array.from ( this.selectedOptions ).map ( option => option.index ))
}

select-Objekt als Combo-Box

Mit selectedIndex und selectedOptions bietet das select-Objekt komfortable Methoden. Es wäre schade, darauf zu verzichten, also machen wir es dem Benutzer einfacher, mehrere Optionen einer Liste durch einfache Klicks zu aktivieren oder zu deaktivieren. Wenn ein einfacher Klick ohne zusätzlich gehaltene Taste weitere Optionen aktivieren soll, muss das mousedown-Event bzw. das touchstart-Event für jede Option überschrieben werden.

const result = [];
const options = document.querySelector("#tee") && document.querySelector("#tee").options;

for (const item of options) {
	item.addEventListener ("mousedown", function (evt) {
		evt.preventDefault();
		document.querySelector("#teeResult").innerHTML = "";

		if (this.hasAttribute ("selected")) {
			this.removeAttribute ("selected");
			delete result[this.index];
		} else {
			this.setAttribute ("selected", "true");
			result[this.index] = this.text;
		}

		result.forEach (e => {
			document.querySelector("#teeResult").innerHTML += e + " <br>";
		});
	})
}