showPicker() for <select>
HTMLSelectElement.showPicker() メソッドは、select 要素のブラウザーピッカーを表示します。
これは、通常、要素が選択された際に表示されるものと同じピッカーですが、ボタンを押すなど、他のユーザー操作から発生します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | 122 | Preview | 121 | | |
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
基本構文
HTML
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
<button onclick="document.getElementById('mySelect').showPicker()">
Open options
</button>ライブデモ
Open a select menu
Request the browser picker for a select element from a separate trigger button.
プレビュー全画面表示
Shipping options
Use a custom button label while keeping a native select as the real control.
プレビュー全画面表示
実務での使いどころ
-
showPicker() for <select> の活用
HTMLSelectElement.showPicker() メソッドは、select 要素のブラウザーピッカーを表示します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。