Auto focus dropdown on select using Jquery

Question

I am trying to click a button that will trigger a dropdown on a select button using focus and enter button. However the enter does not trigger. Here is my code

<!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>

See [http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list](http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) — TehSphinX, May 24 '16 at 06:28
or here http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due — TehSphinX, May 24 '16 at 06:31
I am actually wondering if it's possible to trigger a keypress key on the select tag like "Enter" — Dean Christian Armada, May 24 '16 at 06:34
As you can see in the second link I posted you can do what you want with custom html elements, just not with the standard html select. — TehSphinX, May 24 '16 at 06:36
@DeanChristianArmada Did the code in my answer work for you? — Cornwell, May 26 '16 at 16:31
@Cornwell - Worked somehow but is limited. I raised your answer anyway — Dean Christian Armada, May 27 '16 at 06:31

Cornwell · Answer 1 · 2016-05-24T06:47:51.470

This probably only works in 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>

score 1 · Answer 2 · edited May 23 '17 at 11:52

I would checkout something like this:

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.");
    }
});

An other solution would be mimicking the dropdown and toggle the state of that one. Not the best way of doing it but that way you have complete control of the element.

Auto focus dropdown on select using Jquery

2 Answers2