Javascript 无法使用键盘选择引导下拉列表中的项目

我有一个引导下拉菜单，里面有时区信息。下拉列表已正确填充，但当我单击下拉列表并按下键盘上的键（例如“P”）时，它没有在列表中选择适当的项目。下拉列表的代码如下所示

HTML

<select class="form-control" name="timeZone" ng-model="engagement.timeZone" ng-init="engagement.timeZone=timezones[37].code" ng-options="timeZone.code as timeZone.name for timeZone in timezones" required></select>

输出是这样的。

我想要的是，如果我在键盘上按A键，那么应该选择与字母匹配的第一个项目。（不要与类似过滤的行为混淆）

更新

---

这似乎与引导无关。我删除了所有的引导类，它仍然是一样的。可能与角度有关？

如您所知，使用Boostrap

下拉列表

组件，您无法通过按键盘字母来选择元素。因此，您可以使用以下使用

指令的代码

myApp.directive('keypressEvents',

    function ($document, $rootScope) {

    return {

    restrict: 'A',

    link: function (scope, element, attr) {

        console.log('linked');

        $document.bind('keypress', function (e) {

        $rootScope.$broadcast('keypress', e,  String.fromCharCode(e.which)); 

        var letter = String.fromCharCode(e.which);

        var target = e.target;

        var charat = element[0].textContent.charAt(0);

        if(charat === letter){ 

           element.addClass("red");

        }

      });

    }

  }

});

在那里，您可以看到使用的指令，它只是在按键上进行绑定，最后为找到的具有相同首字母的元素设置类。然而，你只需要把重点放在这一点上

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropup
   <span class="caret"></span>
  </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li keypress-events><a href="#">action</a></li> 
       <li keypress-events><a href="#">something else here</a></li> 
     </ul>
</div>

辍学

---

如您所见，该指令被限制在

li元素上

我知道两种方法，Jquery和Angularjs，哪一种更有用？Angularjs将非常有用：）没有手动创建下拉列表的方法吗？我需要将select元素与ng选项绑定到数据。我用示例下拉列表查看了引导页面，它可以与按键一起工作..嗯，确实有更好的方法来实现这一点，但到目前为止，我认为这就是我一直在使用的代码。。我希望这有帮助。。。