javascriptを使用して選択メニューをプログラマチックにプルダウン

Question

javascriptまたはjqueryを使用して、ボタンをクリックすると選択メニューを自動的にプルダウンする方法をお探しです。私はこの問題を抱えています。なぜなら、カスタム入力がフィールドを選択入力に動的に追加するためのテキストフィールドを使用しているからです。ユーザーが2回クリックしたくないのですが、本質的に問題はこれです。

ボタンのクリックで

$("#dropDownButton").click(function(){ 
 
    //$("#selectBox"). //What goes here??? 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="selectBox"> 
 
    <option val=1>1</option> 
 
    <option val=2>2</option> 
 
</select> 
 

 
<button id="dropDownButton"> 
 
    Pull Down The Select! 
 
</button>

Answer 1

おそらくNOの方法は、直接これを行う代わりに、そこにいくつかのweysします。 Like

::選択のためにラベルを使用し、その上でクリックイベントを発生させます。

:: select要素にフォーカスするために.focus()を使用してください。

::そして、最高の一つが選択

$('#dropDownButton').click(function() { 
     var length = $('#selectBox option').length; 
     //open dropdown 
     $("#selectBox").prop('size', length); 

     // to close 

     //$("#selectBox").prop('size', 0); 
    }); 

しかし、その後のすべてのもaction.Thereを実行する代わりにlistのような他の要素のセットでこれを行うに最善の選択肢を作ることですBootstrapやFoundationのようなCSSフレームワークの大部分で使用されているdivです。

Bootstrap dropdown

Ref

Answer 2

、選択ボックスのサイズが1以上であるかどうかを確認してください。 0または1の場合は、このようにボタンをクリックすると最大サイズにします。

あり

 $("#dropDownButton").click(function(){ 
     //$("#selectBox"). //What goes here??? 

     var no = document.getElementById("selectBox").length; 
     var s; 

     if($("#selectBox").prop('size') == 0 || $("#selectBox").prop('size') == 1) { 
      s = no;  
     } 
     else { 
      s = 1; 
     } 
     $("#selectBox").attr('size', s); 
    });