单击键盘选项卡按钮时显示下拉列表

Question

我有一个下拉列表，我想让它显示列表，当用户单击键盘选项卡按钮时，尝试了几种方式显示在线但它不工作。下拉列表是html下拉菜单和select2下拉菜单。

对于第三种方法，下拉菜单显示何时单击Tab按钮，但是当我在下拉列表中选择另一个值并单击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

我已经找到了答案，从http://jsfiddle.net/PpTeF/1/ 我已经为我的项目删除了以下更改函数，因为我希望用户能够在选择下拉列表中的值时进行选择。 $('select').change(function(){ $(this).attr("size",1).css('z-index','1'); });它可以在键盘标签键被点击时显示下拉菜单，但是这是HTML选择下拉菜单。希望这可以帮助那些正在寻找类似解决方案的人。

码在Opening a html select option on focus

Answer 2

你可以试试这个

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