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

Question

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

对于第 3 种方法，当单击选项卡按钮时下拉菜单会显示，但是当我 select 下拉菜单中的另一个值并单击 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

你可以试试这个

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

Answer 2

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

代码位于 Opening a html select option on focus

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

Show dropdown when keyboard tab button is clicked

javascript

php

html

drop-down-menu

onfocus