Opening a select box using js in Android web browser

Question

I have a standard <select> and would like to open it when a user clicks on another element. It's pretty simple in a regular browser and even on the iphone, but for some reason nothing working on Android.

I've tried the click and focus events, and also tried changing the size attribute of the select but none of these worked.

Has anyone accomplished this before?

Answer 1

Does other input gain focus?

This simple html select example does work fine in the browser: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option check it out on your mobile.

If you are testing in your application, I think your webview is out of focus. A simple plain select does work on android browser. If you want in your own webview javascript you have to enabled it.

Answer 2

I got it working on iOS/Android only by covering another element with select and making select transparent by opacity:

// HTML
<div class="clickable-styled-container">
  Choose your destiny
  <select>
    <option>Destiny 1</option>
    <option>Destiny 2</option>
  </select>
</div>


// CSS
.is-phone .clickable-styled-container {
  position: relative;
}
.is-phone select {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}