Javascript select-Element und option

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>";
		});
	})
}