在Android设备的移动浏览器上自动打开组合框
Tai*_*fun 5 html javascript jquery mobile-website jquery-mobile
我想在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),只有在触摸组合框后,才会出现以下选项:
我希望它们在打开页面后立即出现(见截图3)
,如果可能的话只显示3个选项(滚动后的其他选项):
我怎样才能做到这一点？
编辑1:同时我发现了一个类似的问题在这里,但它似乎还没有解决方案...
编辑2:我现在找到了一个解决方法与jQuery Mobile的和列表视图,请参阅下面回答,但我仍然在等待其他(更好)的想法......
我现在找到了一种使用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>
解决方法的屏幕截图：
| 归档时间： |
|
| 查看次数： |
1392 次 |
| 最近记录： |