Skip to content

Commit

Permalink
Add usage example code
Browse files Browse the repository at this point in the history
  • Loading branch information
lukewarlow committed Nov 29, 2023
1 parent 1f1e2e3 commit 14635e0
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions files/en-us/web/api/htmlselectelement/showpicker/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<p>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button">Show Picker</button>
</p>
```

#### 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}}
Expand Down

0 comments on commit 14635e0

Please sign in to comment.