HTMLSelectElement: showPicker() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
TheHTMLSelectElement.showPicker() method displays the browser picker for aselect element.
This is the same picker that would normally be displayed when the element is selected, but can be triggered from a button press or other user interaction.
Syntax
showPicker()Parameters
None.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMExceptionThrown if the element is not mutable, meaning that the user cannot modify it and/or that it cannot be automatically prefilled.
NotAllowedErrorDOMExceptionThrown if not explicitly triggered by a user action such as a touch gesture or mouse click (the picker requiresTransient activation).
NotSupportedErrorDOMExceptionThrown if the element associated with the picker is not being rendered.
SecurityErrorDOMExceptionThrown if called in a cross-origin iframe.
Security considerations
Transient user activation is required.The user has to interact with the page or a UI element in order for this feature to work.
The method is only allowed to be called in same-origin iframes; an exception is thrown if this is called in a cross-origin iframe.
Examples
Feature detection
The code below shows how to check ifshowPicker() is supported:
if ("showPicker" in HTMLSelectElement.prototype) { // showPicker() is supported.}Launching the picker
This example shows how to use a button to launch the picker for a<select> element with two options.
HTML
<p> <select> <option value="1">One</option> <option value="2">Two</option> </select> <button type="button">Show Picker</button></p>JavaScript
The code gets the<button> and adds a listener for itsclick event.The event handler gets the<select> element and callsshowPicker() on it.
const button = document.querySelector("button");button.addEventListener("click", (event) => { const select = event.srcElement.previousElementSibling; try { select.showPicker(); } catch (error) { window.alert(error); }});Specifications
| Specification |
|---|
| HTML # dom-select-showpicker |