HTML SELECT をプログラム的にドロップダウンさせるにはどうすればよいでしょうか (たとえば、マウスオーバーによる)? 質問する

これは、他のどこでも不可能だと言われているにもかかわらず、以前は HTML + Javascript で実際に可能でしたが、後に非推奨となり、現在は機能しません。

ただし、これは Chrome でのみ機能します。興味があれば、詳細をお読みください。

によるとW3C HTML5 ワーキングドラフト、セクション 3.2.5.1.7。インタラクティブコンテンツ:

HTML の特定の要素にはアクティベーション動作があり、ユーザーがそれらをアクティベートできます。これにより、アクティベーション メカニズムに応じて一連のイベントがトリガーされます [...]例えば、キーボードや音声入力、マウスクリックなど。

ユーザーがクリック以外の方法で定義されたアクティベーション動作を持つ要素をトリガーすると、インタラクションイベントのデフォルトのアクションは実行である必要があります要素上の合成クリックアクティベーション手順。

<select>インタラクティブ コンテンツなので、プログラムでその を表示できると考えました<option>。数時間試してみたところ、 と を使用するdocument.createEvent()と.dispatchEvent()機能することがわかりました。

ということで、デモの時間です。動作する Fiddle はこちらです。

// <select> element displays its options on mousedown, not click.
showDropdown = function(element) {
  var event;
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown', true, true, window);
  element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function() {
  var dropdown = document.getElementById('dropdown');
  showDropdown(dropdown);
};

<select id="dropdown">
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​