diff --git a/files/en-us/web/api/htmlselectelement/showpicker/index.md b/files/en-us/web/api/htmlselectelement/showpicker/index.md index 3ee3cc6414be373..88aa1e36e2d3888 100644 --- a/files/en-us/web/api/htmlselectelement/showpicker/index.md +++ b/files/en-us/web/api/htmlselectelement/showpicker/index.md @@ -58,6 +58,40 @@ if ("showPicker" in HTMLSelectElement.prototype) { } ``` +### Usage + +This example shows how this feature can be used. + +> **Note:** A live example cannot be shown here because they run in a cross-origin frame, and would cause a [`SecurityError`](#securityerror) + +#### HTML + +```html +

+ + +

+``` + +#### JavaScript + +The code simply gets the previous element of the selected button and calls showPicker() on it. + +```js +const button = document.querySelector("button"); +button.addEventListener("click", (event) => { + const select = event.srcElement.previousElementSibling; + try { + select.showPicker(); + } catch (error) { + window.alert(error); + } +}); +``` + ## Specifications {{Specifications}}