HTMLSelectElement.showPicker() — Methode · JavaScript-Referenz

Signatur

HTMLSelectElement.prototype.showPicker()

Beschreibung

showPicker() öffnet die Dropdown-Liste eines <select>-Elements programmatisch. Das ist nützlich, wenn das eigentliche Auswahlfeld optisch versteckt oder in eine eigene Oberfläche eingebettet ist, etwa ein Icon-Button, ein Label oder eine Tastenkombination, die die Liste öffnen soll. Der Nutzer sieht und bedient dabei den normalen, barrierefreien Picker des Browsers.

Die Methode ist durch die Sicherheitsregeln des Browsers beschränkt. Sie funktioniert nur mit vorübergehender Nutzeraktivierung, also direkt in einem Handler für click, keydown, pointerup oder ein ähnliches Ereignis. Außerdem muss das Element bedienbar sein (nicht disabled) und tatsächlich gerendert werden. Innerhalb eines ursprungsfremden (cross-origin) iframes ist der Aufruf nicht erlaubt.

Der Aufruf gibt undefined zurück und wartet nicht, bis der Nutzer etwas ausgewählt hat. Auf die Auswahl reagierst du wie gewohnt über die Ereignisse change bzw. input des Elements.

Beispiele

Picker über einen eigenen Button öffnen

// HTML: <select id="land"><option>Deutschland</option><option>Österreich</option><option>Schweiz</option></select>
//       <button id="oeffnen">Land wählen</button>
const select = document.querySelector('#land');
const button = document.querySelector('#oeffnen');

button.addEventListener('click', () => {
  try {
    select.showPicker();
  } catch (err) {
    console.warn('Picker konnte nicht geöffnet werden:', err.name);
    select.focus(); // Ersatzlösung: wenigstens fokussieren
  }
});

select.addEventListener('change', () => {
  console.log('Gewählt:', select.value);
});

Gewählt: Österreich

Feature-Detection mit Rückfallebene

const select = document.querySelector('select');

const oeffneAuswahl = () => {
  if ('showPicker' in HTMLSelectElement.prototype) {
    select.showPicker();
  } else {
    // Ältere Browser / Safari: nur fokussieren
    select.focus();
  }
};

document.querySelector('#label-icon').addEventListener('click', oeffneAuswahl);

Aufruf ohne Nutzeraktivierung schlägt fehl

const select = document.querySelector('select');

// Kein Nutzerereignis, deshalb wird eine Exception geworfen
try {
  select.showPicker();
} catch (err) {
  console.log(err.name);
}

NotAllowedError

Picker per Tastenkürzel öffnen

const select = document.querySelector('#sortierung');

document.addEventListener('keydown', (event) => {
  // Alt + S öffnet die Sortierauswahl
  if (event.altKey && event.key.toLowerCase() === 's' && !select.disabled) {
    event.preventDefault();
    select.showPicker();
  }
});

// Wichtig · Fallstricke

Mögliche Exceptions (DOMException): NotAllowedError ohne vorübergehende Nutzeraktivierung, InvalidStateError wenn das Element nicht bedienbar ist (z. B. disabled), NotSupportedError wenn das Element nicht gerendert wird (z. B. display: none), SecurityError bei einem Aufruf aus einem ursprungsfremden iframe.
Nutzeraktivierung verfällt: Nach einem await, einem setTimeout oder einer längeren asynchronen Pause kann die Aktivierung abgelaufen sein. Rufe showPicker() deshalb möglichst synchron im Ereignis-Handler auf.
Versteckte Selects: Wenn du das Element mit display: none oder visibility: hidden ausblendest, schlägt der Aufruf fehl. Blende es stattdessen optisch aus (z. B. mit opacity: 0 oder einer Klasse für „nur für Screenreader“).
Kompatibilität: Chrome/Edge ab 121 und Firefox ab 122 unterstützen die Methode. In Safari und älteren Browsern fehlt sie teilweise, deshalb immer per Feature-Detection prüfen. Das Gegenstück HTMLInputElement.showPicker() ist schon länger verfügbar.
Auf Mobilgeräten sieht der Picker je nach Plattform anders aus (z. B. als Auswahlrad oder Bottom-Sheet).

Siehe auch

HTMLObjectElement.reportValidity() HTMLSelectElement.add() HTMLSelectElement.item() HTMLSelectElement.namedItem() HTMLSelectElement.remove()