プログラムでHTML SELECTにドロップダウンを指示するにはどうすればよいですか（たとえば、マウスオーバーのため）。

プログラムでHTML selectにドロップダウンを指示するにはどうすればよいですか（たとえば、マウスオーバーのため）。

HTML選択タグを使用してこれを行うことはできませんが、JavaScript と HTML を使用して行うことができます。これを行うさまざまな既存のコントロールがあります。たとえば、SOの「興味深い/無視されたタグ」エントリに添付された「提案」リストや、メールアドレスのGmailの検索などです。

この機能を提供する多くのJavaScript + HTMLコントロールがあります。アイデアのオートコンプリートコントロールを探してください。

オートコンプリートコントロールについては、このリンクを参照してください... http://ajaxcontroltoolkit.codeplex.com/

これは実際にはHTML + Javascriptで実際に可能でしたが、他の地域では不可能と言われていますが、後で非推奨になり、現在は機能していません。

ただし、これはChromeでのみ機能しました。興味があればもっと読んでください。

よるHTML5、セクション3.2.5.1.7のためのW3Cワーキングドラフト。インタラクティブコンテンツ：

HTMLの特定の要素にはアクティブ化動作があります。つまり、ユーザーはそれらをアクティブ化できます。これにより、たとえばキーボードまたは音声入力を使用したり、マウスをクリックしたりするなど、アクティブ化メカニズムに依存する一連のイベントがトリガーされます。

ユーザーがクリック以外の方法でアクティブ化動作が定義された要素をトリガーする場合、相互作用イベントのデフォルトアクションは、要素で合成クリックアクティブ化手順を実行することです。

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

とはいえ、デモ時間。 これが動作するフィドルです。

HTML：

<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>​

JavaScript：

// <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);
};

同じことをする方法がChromeにない場合は、このフィドルを自由に変更してください。

Xavier Hoの答えは、現在出回っているほとんどのブラウザーで問題を解決する方法をカバーしています。しかし、JavaScriptでイベントを「ディスパッチ/変更」しないことは、良い習慣です。（mousedownこの場合も同様です）

バージョン53以降、Google Chrome は信頼できないイベントに対してデフォルトのアクションを実行しません。スクリプトによって作成または変更された、またはdispatchEventメソッドを介してディスパッチされたイベントなど。この変更は、FirefoxとIEに合わせるためのものであり、すでにアクションを実行していないと思います。

テスト目的で、FiddleはXavierの回答をChrome 53以降では機能しないとしています。（FFとIEはテストしていません）。

参照用リンク：

https://www.chromestatus.com/features/57188​​03933560832 https://www.chromestatus.com/features/6461137440735232

また、initMouseEventも非推奨になりました

これは私が得ることができる最も近いものであり、要素onmouseoverのサイズを変更し、サイズをonmouseoutに復元します。

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

私はこれと同じ問題を抱えており、これを解決するための簡単な方法はhtmlとcssを使用することでした。

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

これはChromeではもう不可能だと思います。

Asim K Tによると、Chromeのバージョン53ではこの機能が無効になっているようです。

仕様によると http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

信頼できるイベントは、デフォルトのアクション（クリックイベントを除く）を起動しないでください。

ただし、webviewで有効にしていますが、これはテストしていません。

一部のWebビューは内部でfastclickを使用していることがわかりました。破損のリスクがあるため、信頼されていなくてもマウスを選択できるようにします。

そしてこの議論では、開発者にプログラムでドロップダウンを開かせるという考えは放棄されています。

まだ誰かがこれを探しているなら：

<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" >Show dropdown items</button>

JavaScript：

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

更新：

この問題に対する完璧な解決策がなくなるまでは、このシナリオを回避することができます。なぜこれをしたいのですか？私は数ヶ月前にモバイルデバイス用の選択したプラグインを作成するための解決策を考えていました

https://github.com/HemantNegi/jquery.sumoselect

最後に、カスタムdiv（またはその他の要素）を透明な選択要素でマスクして、ユーザーと直接対話できるようにしました。

これが私が見つけた最良の方法です。注これはWindows上のIEでのみ機能し、シェルにアクセスするため、おそらくWebは安全なゾーンにある必要があります。トリックは、ALT-下矢印が選択ドロップダウンを開くためのショートカットキーであることです。

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

あなたがしたいときに、一つのことは不可能であると考えるのをやめてください。

男が作成したこの拡張JS関数を使用します。

http://code.google.com/p/expandselect/

このJSを含めて、次のようにparamを選択IDとして渡して呼び出すだけです。

ExpandSelect(MySelect)

私は間違っているかもしれませんが、デフォルトの選択ボックスでそれが可能であるとは思いません。JSとCSSを使用して目的の結果を達成できますが、（私の知る限り）バニラSELECTはできません。

「HTMLセレクト」を開くには、この質問で述べたいくつかの回避策と同様の回避策を使用します。ただし、これを行うよりきれいな方法は、「select2」や「chosen」などの選択ライブラリをプロジェクトに追加することです。たとえば、select2をプログラムで開くのは次のように簡単です。

$('#target-select').select2('open');

これは正確にはあなたが求めたものではありませんが、私はこのソリューションが単純であることを気に入っています。ドロップダウンを開始したいほとんどの場合、それはユーザーが実際に選択を行ったことを検証しているためです。ドロップダウンのサイズを変更してフォーカスします。これにより、スキップした項目が適切に強調表示されます。

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();