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

标签 javascript jquery html jquery-mobile mobile-website

我希望在 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 Mobilelistview解决方法,请参阅下面的答案,但是我我还在等待其他(更好的)想法...

最佳答案

我现在找到了一个解决方法,它使用 jQuery Mobilelistview
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

关于javascript - 在 Android 设备的移动浏览器上自动打开组合框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13011760/

相关文章:

javascript 将 div 的内容从 Canvas 复制到剪贴板在 Firefox 上不起作用

javascript - 如何以可变间隔进行递归 setTimeout

javascript - 我需要使用 JSON 对象从数组创建图像库

html - 使用 CSS 围绕圆圈旋转对象?

javascript - jquery:从输入中选择并删除一个单词

javascript - 父子div的位置都是: absolute. 如何让子div占据页面100%的宽度和高度?

javascript - 如何在每个元素后动态添加特定的 div

javascript - 防止元素包装

javascript - 获取下拉列表的选定值

html - 两个固定的可滚动左侧边栏