HTMLSelectElement: showPicker() 方法

有限的可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

HTMLSelectElement.showPicker() 方法会显示 select 元素的浏览器选择器。

这与在选择元素时通常会显示的选择器相同，但可以通过按钮按下或其他用户交互触发。

语法

js
showPicker()

参数

无。

返回值

无 (undefined).

异常

InvalidStateError DOMException

如果元素不可变，则抛出异常，这意味着用户无法修改它，并且/或者它无法自动填充。

NotAllowedError DOMException

如果未由用户操作（例如触摸手势或鼠标点击）显式触发，则抛出异常（选择器需要瞬态激活）。

NotSupportedError DOMException

如果与选择器关联的元素未被渲染，则抛出异常。

SecurityError DOMException

如果在跨源 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅