Simulate/trigger select box in iOS Safari (perhaps with a touchend)

Question

I have a

<input type="button" id="sf" value="Select field"> 

and a

<select id="rsf"><option value="something">Something</option><option... ... </select>

The select box is hidden with visibility:hidden, so it's not visible. (It's actually behind the button)

So when I click the button, I want the native select box to open up with the different possibilities to choose from. The possibilities will be visible, but the selectbox itself is still hidden.

It works on desktop with this code:

$('#sf').on('touchend click', function() {
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  $('#rsf')[0].dispatchEvent(e);
});

I tried a similar approach with document.createTouch and everything that follows with it like e.initTouchEvent and so on... but without any luck.... Does anyone have a solution? The reason I want it this way, is because I want to trigger the native selectbox UI in iOS. (or any other OS for that matter on mobile).

Answer 1

I couldnt make it work like that, so I made the selectbox opacity 0, and put it behind the button, and gave the button "pointer-events: none". The select box must have the same dimensions as the button with width and height, so it also had -webkit-appearance: none; and appearance: none; Also had to make sure the z-index of the button was higher than the selectbox.