HTMLSelectElement: метод showPicker()

Метод HTMLSelectElement.showPicker() отображает средство выбора браузера для элемента select.

Это то же самое средство выбора, которое обычно отображается при выборе элемента, но может быть запущено при нажатии кнопки или другом взаимодействии пользователя.

Нет.

None (undefined).

InvalidStateError DOMException

Выбрасывается, если элемент не изменяемый, то есть пользователь не может его изменить и/или его нельзя автоматически заполнить.

NotAllowedError DOMException

Выбрасывается, если метод не был явно вызван действием пользователя, таким как жест касания или щелчок мышью (средство выбора требует временной активации).

NotSupportedError DOMException

Выбрасывается, если элемент, связанный со средством выбора, не отображается.

SecurityError DOMException

Выбрасывается, если вызывается из фрейма с другим происхождением.

Временная активация пользователя требуется. Пользователь должен взаимодействовать со страницей или элементом пользовательского интерфейса для работы этой функции.

Метод может быть вызван только в фреймах с тем же происхождением; исключение выбрасывается, если он вызван из фрейма с другим происхождением.

Код ниже демонстрирует, как проверить, поддерживается ли showPicker().

if ("showPicker" in HTMLSelectElement.prototype) {
  // showPicker() is supported.
}

Этот пример показывает, как использовать кнопку для запуска средства выбора для элемента <select> с двумя опциями.

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() на нем.

const button = document.querySelector("button");
button.addEventListener("click", (event) => {
  const select = event.srcElement.previousElementSibling;
  try {
    select.showPicker();
  } catch (error) {
    window.alert(error);
  }
});

• <select>
• HTMLSelectElement
• HTMLInputElement.showPicker()