Question

我有一个下拉列表，我希望在用户点击键盘标签按钮时显示该列表尝试了一些在线显示的方法，但它无法正常工作。下拉列表是html下拉列表和select2下拉列表。

对于第三种方法，下拉列表显示单击选项卡按钮时，但是当我在下拉列表中选择另一个值并单击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/ 找到了答案我已经为我的项目删除了下面的更改功能，因为我希望用户在选择下拉列表中的值时能够显示。 $('select').change(function(){ $(this).attr("size",1).css('z-index','1'); });可以显示单击键盘标签键时的下拉列表，但这是针对html选择下拉列表的。希望这可以帮助那些找到类似解决方案的人。

代码可在 Opening a html select option on focus

中找到

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

2 个答案: