キーボードタブボタンをクリックすると、ドロップダウンを表示します

Question

ドロップダウンリストがあり、ユーザーがキーボードタブボタンをクリックしたときにリストを表示したいのですが、いくつかの方法がオンラインで表示されましたが機能しません。ドロップダウンリストはhtmlドロップダウンとselect2ドロップダウンです。

3番目の方法では、タブボタンをクリックしたときにドロップダウンが表示されますが、ドロップダウンで別の値を選択してTABボタンをクリックしても、元の値のままです。私はそれをどうやって解決できるのか分かりますか？

私のドロップダウン：

DropDown1

<div class="col-md-4"> 
    <select class="form-control" id="sauces"></select> 
    </div> 
    $('#sauces').select2({ 
     data: [{ 
     id: 0, 
     text: "Banana" 
     }, { 
     id: 1, 
     text: "Red Velvet" 
     }, { 
     id: 2, 
     text: "Vanilla" 
     }, { 
     id: 3, 
     text: "Strawberry" 
     }, { 
     id: 4, 
     text: "Chocolate" 
     }], 

    }); 

DropDown2

<select> 
    <option value="round">Round</option> 
    <option value="square">Square</option> 
    <option value="circle">Circle</option> 
    <option value="mini" selected>Mini</option> 
</select> 

私が試した方法：

1）

 function select2Focus() { 
     var select2 = $(this).data('select2'); 
     setTimeout(function() { 
      if (!select2.opened()) { 
       select2.open(); 
      } 
     }, 0); 
    } 

2）

$('.input-group input').keydown(function(e){ 
    if(e.which == 9){ // tab 
     e.preventDefault(); 
     $(this).parent().find('.dropdown-toggle').click(); 
     $(this).parent().find('.dropdown-menu a:first').focus(); 
    } 
}); 

3）

$(document).on('focus', '.select2', function() { 
    $(this).siblings('select').select2('open'); 
}); 

Answer 1

を試すことができます私はドロップダウンで値を選択しているときにタブをクリックできるようにしたいので、私は自分のプロジェクトで以下の変更機能を削除しました。 $('select').change(function(){ $(this).attr("size",1).css('z-index','1'); });キーボードのタブキーをクリックしたときにドロップダウンを表示することができますが、これはhtml選択ドロップダウンの場合です。これが同様の解決策を見いだす人々に役立つことを望みます。

コードは、あなたのhtmlの一部を追加することができますOpening a html select option on focus

Answer 2

あなたは、私がhttp://jsfiddle.net/PpTeF/1/から答えを見つけたこの1

$(this).parent().find('.dropdown-toggle').trigger('click');