18

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?

Community
  • 1
  • 1
Prem
  • 15,911
  • 11
  • 31
  • 35
  • Could you force a click/tap on that element? – Seth May 23 '11 at 12:39
  • Would you tell us what the effect is you want to achieve? What added value for the user I mean. – mplungjan May 23 '11 at 12:40
  • 1
    @Seth - how? @mplungjan - It's for an SVG-based data visualisation app, where different gestures can trigger different outcomes. For example, the user can drag a circle around the screen, but if the same circle is given a single tap of the finger then I want a select box full of options to appear. I don't want to require 2 clicks: one to show/ focus the select, +1 to show the options. I *could* make the select element the one that the user interacts with, so it opens when clicked and i could move the circle element if the select element is dragged, but I'd prefer to avoid that if possible. – Prem May 23 '11 at 14:07
  • I find it strange that the technique that you mentioned in the update works in Safari on the desktop, but not in iOS. After lots of searching, I can still not find anything explaining why it does not work on iOS. – BruceHill Jul 12 '12 at 19:30

4 Answers4

11

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

Screenshot of technique with opacity set higher for demo purposes

Matteo Guarnerio
  • 720
  • 2
  • 9
  • 26
joshwbrick
  • 5,882
  • 9
  • 48
  • 72
3

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.

BoffinBrain
  • 6,337
  • 6
  • 33
  • 59
2

The select element needs to be visible. If you use jQuery you can do it as follows:

$('mySelectElementSelector').focus();

On mobile it will show the default select control. On desktop just focus on the select control.

Max
  • 1,054
  • 1
  • 12
  • 20
Doruk Eker
  • 203
  • 3
  • 8
0

Have you tried the change() method?

Robert
  • 8,717
  • 2
  • 27
  • 34
user482024
  • 95
  • 1
  • 2
  • 12
  • I'm not sure what you are suggesting. Detecting `change` events won't trigger the select element to open. – Prem Aug 28 '12 at 12:15