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 |
浏览器兼容性
加载中…