Question

我想在Android设备的浏览器上自动打开组合框。
我有以下代码：

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

这适用于桌面浏览器（请参见屏幕截图1），但遗憾的是，不适用于Android设备上的浏览器（请参见屏幕截图2），只有在触摸组合框后，才会出现以下选项：

screenshot desktop screenshot device

我希望它们在打开页面后立即出现（见屏幕截图3）
如果可能的话只显示3个选项（滚动后的其他选项）：

screenshot 3

我该怎么做？

编辑1 ：同时我发现了一个类似的问题here，但似乎也没有解决方案......

编辑2 ：我现在找到解决方法与 jQuery Mobile 和 listview ，请参阅下面的答案，不过我我还在等待其他（更好的）想法...

Answer 1

我现在找到了一个使用 jQuery Mobile 和 listview 的解决方法。
打开页面后会立即显示列表视图，这对我来说是可以的。然而，一个完美的解决方案是只显示3个选项（滚动后的其他选项）。还在等待其他想法...

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

Answer 2

而不是使用div。我认为你应该使用表格。

在Android设备的移动浏览器上自动打开组合框

2 个答案: