auto open combobox on mobile browsers for Android devices

Question

I would like to have a combobox open automatically on browsers for Android devices.
I have the following code:

<!doctype html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
 <title>Combobox</title>
</head>

<body>
  <div id="combobox">
    <select id="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <script>
    $(document).ready(function() {
      document.getElementById('select').size=3;
    });
  </script>
</body>
</html>

This works on desktop browsers (see screenshot 1), but unfortunately not with browsers on Android devices (see screenshot 2), only after touching the combobox currently the options appear:

screenshot desktop screenshot device

I would like them to appear immediately after opening the page (see screenshot 3)
and if possible to show only 3 options (the other options after scrolling):

How can I do that?

EDIT 1: Meanwhile I found a similar problem here, but as it seems to be also without solution...

EDIT 2: I now found a workaround with jQuery Mobile and a listview, see answer below, however I'm still waiting for other (better) ideas...

possible duplicate http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery — zizoujab, Oct 23 '12 at 22:03
@Zied-Jaballah thanks for your message, the thread you mentioned is about `"Is there a way to open a select box using Javascript (and jQuery)?" `. I know, that there is a way, see my solution, but this unfortunately **does not work on mobile browsers for Android devices**... — Taifun, Oct 24 '12 at 00:09

score 0 · Accepted Answer · answered Oct 24 '12 at 22:43

I now found a workaround which uses jQuery Mobile with a listview.
The listview immediately appears after opening the page, which is ok for my purposes. A perfect solution however would be to show only 3 options (the other options after scrolling). Still waiting for other ideas...

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>
 <title>Combobox Workaround</title>
</head>

<body>
  <div data-role="page">
    <ul id="listview" data-role="listview">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </div>

  <script>
    $('#listview').on('click', ' > li', function () {
      // show selected index in alert box
      alert('index=' + $(this).index());
    });
  </script>
</body>
</html>

screenshot of the workaround:

score -1 · Answer 2 · answered Oct 24 '12 at 01:57

-1

Instead of using a div. I think you're supposed to use a form.

answered Oct 24 '12 at 01:57

user805981

9,979
8
44
64

nice guess, but unfortunately not very helpful... the question is about how to get it done **to work on mobile browsers for Android devices** – Taifun Oct 24 '12 at 17:15

auto open combobox on mobile browsers for Android devices

2 Answers2