HTMLSelectElement: showPicker() 方法
HTMLSelectElement.showPicker() 方法會顯示 select 元素的瀏覽器選擇器。
這與元素被選中時通常會顯示的相同選擇器，但可以從按鈕按下或其他使用者互動中觸發。
語法
js
showPicker()
引數
無。
返回值
無（undefined）。
異常
InvalidStateErrorDOMException-
如果元素不可變，則會丟擲此異常，這意味著使用者無法修改它和/或它無法自動預填充。
NotAllowedErrorDOMException-
如果不是由使用者操作（如觸控手勢或滑鼠單擊）顯式觸發，則會丟擲此異常（選擇器需要瞬時啟用）。
NotSupportedErrorDOMException-
如果與選擇器關聯的元素未被渲染，則會丟擲此異常。
SecurityErrorDOMException-
如果在跨域 iframe 中呼叫，則會丟擲此異常。
安全注意事項
需要瞬時使用者啟用。使用者必須與頁面或 UI 元素進行互動才能使此功能正常工作。
該方法只允許在同源 iframe 中呼叫；如果在跨域 iframe 中呼叫，則會丟擲異常。
示例
特性檢測
下面的程式碼顯示瞭如何檢查 showPicker() 是否受支援
js
if ("showPicker" in HTMLSelectElement.prototype) {
// showPicker() is supported.
}
啟動選擇器
本示例展示瞭如何使用按鈕為具有兩個選項的 <select> 元素啟動選擇器。
HTML
html
<p>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button">Show Picker</button>
</p>
JavaScript
程式碼獲取 <button> 元素併為其 click 事件新增一個監聽器。事件處理程式獲取 <select> 元素並在其上呼叫 showPicker()。
js
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
const select = event.srcElement.previousElementSibling;
try {
select.showPicker();
} catch (error) {
window.alert(error);
}
});
規範
| 規範 |
|---|
| HTML # dom-select-showpicker |
瀏覽器相容性
載入中…