展開後のドロップダウンリスト

Question

データ入力ASP.netフォームを作成していて、ユーザータブをドロップダウンリストに追加するときに、ドロップダウンリストコントロールをクリックせずに展開したいと考えています。ユーザーは、矢印キーを使用して項目を選択してタブアウトし、ドロップダウンをデフォルトの表示に戻すことができます。これを実装する方法はありますか？私はテキストボックスでドロップダウンエクステンダーを使用してみましたが、うまく動作しません。

Answer 1

onfocusのイベントをドロップダウンのイベントと呼びます。

function expand() { 
    var dropdown = document.getElementById('ddl'); 
    var event; 
    event = document.createEvent('MouseEvents'); 
    event.initMouseEvent('mousedown', true, true, window); 
    dropdown.dispatchEvent(event); 
} 

あなたのhtmlを考慮し

<select id="ddl" onfocus="expand()"> 
<option value="0">Select</option> 
<option value="1">AAAA</option> 
<option value="2">BBBBB</option> 
</select> 

Fiddle

Answer 2

あなたが 'ddlTest' と呼ばれるドロップダウンリストを持っていると仮定ので、この方法を試してください。

<script> 
    function Open() { 
     var myDropDown = document.getElementById("ddlTest"); 
     var length = myDropDown.options.length;   
     myDropDown.size = length; 
    } 
    function Select(){ 
     var myDropDown = document.getElementById("ddlTest"); 
     myDropDown.size = 1; 
     var str = myDropDown.options[myDropDown.selectedIndex].value; 
     alert(str); 
    } 
</script> 

<select ID="ddlTest" onfocus="Open()" onfocusout="Select()"> 
<option>option #1</option> 
<option>option #2</option> 
<option>option #3</option> 
<option>option #4</option> 
<option>option #5</option> 
<option>option #6</option> 
<option>option #7</option> 
</select>