HTMLSelectElement.size — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.size

Beschreibung

Die Eigenschaft size eines HTMLSelectElement spiegelt das HTML-Attribut size wider. Sie legt fest, wie viele Zeilen (Optionen) eines Auswahlfelds gleichzeitig sichtbar sein sollen. Der Wert ist eine nicht-negative Ganzzahl vom Typ number.

Ist size größer als 1, stellt der Browser das Element nicht mehr als aufklappbare Liste (Dropdown) dar, sondern als scrollbares Listenfeld (Listbox) mit der angegebenen Zeilenzahl. Bei 0 (Standardwert, wenn das Attribut fehlt) entscheidet der Browser selbst: Für ein einfaches <select> ergibt das ein Dropdown, für ein <select multiple> meist eine Listbox mit etwa vier Zeilen.

Typische Einsatzfälle sind Listenfelder, bei denen Nutzer mehrere Einträge auf einen Blick sehen sollen, etwa bei Mehrfachauswahl, Zuordnungs-Dialogen („verfügbar“ ↔ „ausgewählt“) oder dynamisch wachsenden Listen, deren Höhe per JavaScript an die Anzahl der Optionen angepasst wird.

Parameter

Name	Typ	Default	Beschreibung
$value	number	0	Beim Setzen: gewünschte Anzahl sichtbarer Zeilen. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl umgewandelt und in das Attribut `size` geschrieben.

Rückgabewert

Typ

number

Beschreibung

Die im Attribut size angegebene Zeilenzahl oder 0, wenn das Attribut fehlt oder ungültig ist. Der Wert gibt nicht die tatsächlich dargestellte Standardhöhe wieder.

Beispiele

Wert auslesen

// HTML: <select id="land" size="3">…</select>
const select = document.querySelector('#land');
console.log(select.size);
console.log(select.getAttribute('size'));

3 "3"

Dropdown in Listbox umwandeln

const select = document.createElement('select');
['Rot', 'Grün', 'Blau', 'Gelb', 'Lila'].forEach((farbe) => {
  select.add(new Option(farbe, farbe.toLowerCase()));
});
console.log(select.size); // noch kein Attribut gesetzt

select.size = 4; // ab jetzt Listbox mit 4 sichtbaren Zeilen
document.body.append(select);
console.log(select.outerHTML.startsWith('<select size="4">'));

0 true

Höhe dynamisch an Optionsanzahl anpassen (max. 8 Zeilen)

const liste = document.querySelector('#ausgewaehlt');

const passeHoeheAn = () => {
  // Mindestens 2, damit es eine Listbox bleibt, höchstens 8
  liste.size = Math.min(Math.max(liste.options.length, 2), 8);
};

document.querySelector('#hinzufuegen').addEventListener('click', () => {
  const nr = liste.options.length + 1;
  liste.add(new Option(`Eintrag ${nr}`, `e${nr}`));
  passeHoeheAn();
  console.log(`Sichtbare Zeilen: ${liste.size}`);
});

passeHoeheAn();

Sichtbare Zeilen: 3 (nach dem ersten Klick bei 2 vorhandenen Optionen)

// Wichtig · Fallstricke

Standardwert ist 0, nicht 1 oder 4: Auch wenn ein <select multiple> ohne Attribut z. B. vier Zeilen zeigt, liefert size 0. Die sichtbare Höhe lässt sich damit also nicht zuverlässig ermitteln.
size = 1 bei multiple: Mobile Browser (iOS Safari, Chrome auf Android) ignorieren size oft ganz und zeigen stattdessen eigene Auswahl-Dialoge. Auf die Listbox-Darstellung sollte man sich mobil nicht verlassen.
Negative Werte: Das Zuweisen eines negativen Werts löst in aktuellen Browsern keine Exception mehr aus. Stattdessen wird der Wert als vorzeichenlose Ganzzahl umgewandelt bzw. auf den Standardwert zurückgesetzt. Werte vorher prüfen.
Styling: Die tatsächliche Höhe hängt von Schrift, Innenabständen und CSS ab. Eine per CSS gesetzte height überschreibt die durch size vorgegebene Höhe.
Die Eigenschaft wird in allen Browsern seit langem unterstützt (DOM Level 1).

Siehe auch

HTMLLinkElement.sizes HTMLSelectElement.name HTMLSelectElement.type HTMLSelectElement.form HTMLSelectElement.value