From 14635e054d59c4f89472f7c95f052b559feee3da Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Wed, 29 Nov 2023 15:15:59 +0000
Subject: [PATCH] Add usage example code

---
 .../api/htmlselectelement/showpicker/index.md | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

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
+<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}}