Search code examples
javascriptjqueryhtmljquery-mobilemobile-website

auto open combobox on mobile browsers for Android devices

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):

screenshot 3

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...

Solution

  • 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:
    screenshot