JavaScript on iOS: opening an HTML select element

Question

I'm not hopeful, but I'll ask just in case.

I would like to be able to use JavaScript to open a select element in mobile Safari for iPhone/iPad.

An extensive Google / Stack Overflow search shows that a lot of people would like to be able to do this in browsers in general, but it is not supported (why not, I wonder?). Various hacks have been suggested, from calling focus() on the select element and changing its size property to make more option elements visible, or constructing an entirely mock select element with <div> and <ul> elements. I would, however, like to use the native browser select controls in iPad and iPhone.

I wondered, just maybe, someone might know of a proprietary Apple WebKit method to do this. It would be something like:

var myselect = document.getElementsByTagName("select")[0];
myselect.open(); // this method doesn't exist

As a bonus, it'd also be handy to know of a boolean property that says whether the select element is currently open/active, or not (i.e. not just whether the element has focus). I know I can work this out by tracking click and change events, but a simple property would be useful.

Wishful thinking?

---

UPDATE:
I don't yet have the answer, but I've found that simulating a mousedown successfully opens a select element in Google Chrome, but not iPad or Firefox and so on:

function simulateMouseEvent(eventName, element) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent(eventName, true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  element.dispatchEvent(evt);
}

simulateMouseEvent("mousedown", select);

UPDATE:
I've asked a related, but different (and similarly unanswered!) question on select boxes here: Is there a DOM event that fires when an HTML select element is closed?

Answer 1

I have a working solution for this that works on recent versions of iOS and Android. I haven't yet tested on older versions. There are no two ways about it: this solution is a hack. But it works if implemented carefully.

In my situation I had iOS 7 like toggle switch element. I wanted the picker view for the select to be presented when the switch was turned on. In my case we did not need or want the user to see the select field itself. We merely wanted to use iOS' nice scrolly-picker interface.

I used CSS to position and stretch the select completely over the switch. I then set the opacity in CSS to something like opacity: .001; which makes it invisible for all intents and purposes. It may still work with opacity 0 but I felt leaving a little opacity there may be safer and you really can't see it all anyway. Now when the user taps the area of the screen that is displaying the switch the tap events are actually going to the select which causes the picker view to display.

On the onchange event of the select I set display: none; to completely hide the select. This means that when the user touches the switch to turn it off they are interacting with the switch itself. When the switch is toggled off I then set display: block to return the select to its active state.

My use case is narrow but the position/opacity technique should be adaptable to many use cases though you may have to have 2 select elements in cases where you want the field to be visible.

Here is a screenshot demoing the technique. The opacity is set to 0.25 in this screenshot for demo purposes. When you set it to 0.001 you can't see the select

Answer 2

Triggering HTML controls with JS is a very gray area, partly because of security reasons, and partly due to lack of support. Even using frameworks like jQuery, you cannot simply click() a link to follow it in the same way as click() on a button - you need to trigger a native click event at the browser level (I believe the latest version of Selenium does this, but that's a testing framework so unsuitable for this problem). Congrats on being able to achieve a partial result in Chrome! However, you will not find a universal solution that uses real select inputs.

I would suggest using a different type of control - either a vertical stack of buttons if you want to press one to activate a feature, or a stack of radio buttons backed by labels (with a little CSS) if you want a multi-choice format.