Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/showPicker below:

HTMLSelectElement: showPicker() method - Web APIs

Limited availability

The HTMLSelectElement.showPicker() method displays the browser picker for a select 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.

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.

<p>
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <button type="button">Show Picker</button>
</p>

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3