使用 Jquery 选择自动对焦下拉菜单答案

【问题标题】：Auto focus dropdown on select using Jquery使用 Jquery 选择自动对焦下拉菜单
【发布时间】：2016-05-24 21:14:08
【问题描述】：

我正在尝试单击一个按钮，该按钮将使用焦点和输入按钮触发选择按钮上的下拉菜单。但是输入不会触发。这是我的代码

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <button id="showButton">Click Me!</button>
    <select id="show">
      <option value=""></option>
      <option value="">One</option>
      <option value="">Two</option>
      <option value="">Three</option>
    </select>
    <input type = "text" id="dean">
    <script type="text/javascript">
      $("#showButton").click(function(){
        $("#show").focus();
        e = $.Event('keyup');
        e.keyCode= 13; // enter
        $('#show').trigger(e);
      });
    </script>
  </body>
</html>

【问题讨论】：

见http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list
或这里stackoverflow.com/questions/249192/…
我实际上想知道是否有可能触发选择标签上的按键，如“Enter”
很确定你不能
正如您在我发布的第二个链接中看到的那样，您可以使用自定义 html 元素做您想做的事情，而不是使用标准的 html 选择。

标签： javascript jquery

【解决方案1】：

这可能只适用于 Chrome。

$("#showButton").click(function() {
  var e = new MouseEvent('mousedown',  {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  
  $("#show")[0].dispatchEvent(e);
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>

<body ng-controller="myCtrl">
  <button id="showButton">Click Me!</button>
  <select id="show">
    <option value=""></option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
  <input type="text" id="dean">
</body>

</html>

【讨论】：

【解决方案2】：

我会像这样结帐：

Trigger a select form element to show its options (open drop down options list) with Javascript

HTML

<input type="button" id="show" value="show" />
<select id="myslect">
    <option>nothing</option>
    <option>something</option>
    <option>anything</option>
</select>

JAVASCRIPT

$("#show").click(function () {
    var element = $("select")[0],
        worked = false;
    if(document.createEvent) { // all browsers
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            worked = element.dispatchEvent(e);
    } else if (element.fireEvent) { // ie
        worked = element.fireEvent("onmousedown");
    }
    if (!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }
});

另一种解决方案是模仿下拉菜单并切换该下拉菜单的状态。这不是最好的方法，但这样你就可以完全控制元素。

【讨论】：