0

At least some phones show a native popup rather than the default dropdown when a select element is opened. Is there a way to manually trigger that selection popup from Javascript without actually using a select element?

I've tried having a hidden select element and triggering a click event on it when I need the user to make a selection, but that doesn't seem to work.

What does seem to work is to make the select transparent (opacity: 0) and overlaying it on top of the element that should trigger the selection popup. This however feels hacky, and requires otherwise unnecessary code to preserve hover/click functionality.

Schlaus
  • 18,144
  • 10
  • 36
  • 64

1 Answers1

0

Try this:

<html>
<head>
    <style>
        html, body
        {
            margin  :0;
            padding :0;
        }
        .hiddenElem
        {
            position :absolute;
            top      :-1000px;
            left     :-1000px;
        }
    </style>
</head>
<body>
    <div class="hiddenElem">
        <select name="selectField" id="selectField">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        setTimeout(function()
        {
            var element=$("#selectField")[0], worked=false;
            if(document.createEvent)
            {
                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)
            {
                worked=element.fireEvent("onmousedown");
            }
            if(!worked)
            {
                alert("It didn't worked in your browser.");
            }
        }, 100);
    </script>
</body>
</html>

Reference: How to open the select input using jquery

Community
  • 1
  • 1
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • Thanks for the answer, but unfortunately this didn't work, at least not on my testing device (Chrome 43.0.2357.93 running on Android 4.2.2). – Schlaus Jun 28 '15 at 18:33