HTMLSelectElement: showPicker() method

None.

None (undefined).

InvalidStateError DOMException

Thrown if the element is not mutable, meaning that the user cannot modify it and/or that it cannot be automatically prefilled.

NotAllowedError DOMException

Thrown if not explicitly triggered by a user action such as a touch gesture or mouse click (the picker requires Transient activation).

NotSupportedError DOMException

Thrown if the element associated with the picker is not being rendered.

SecurityError DOMException

Thrown if called in a cross-origin iframe.

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.

The code below shows how to check if showPicker() is supported:

if ("showPicker" in HTMLSelectElement.prototype) {
  // showPicker() is supported.
}

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 its click event. The event handler gets the <select> element and calls showPicker() on it.

const button = document.querySelector("button");
button.addEventListener("click", (event) => {
  const select = event.srcElement.previousElementSibling;
  try {
    select.showPicker();
  } catch (error) {
    window.alert(error);
  }
});

• <select>
• HTMLSelectElement
• HTMLInputElement.showPicker()