📅 最后修改于: 2023-12-03 15:23:54.726000 🧑 作者: Mango
如果您需要一个垂直选择的组件，那么 jQuery Mobile 里面提供了一个非常棒的选择器，它被称为 "selectmenu"。使用 selectmenu 组件，用户可以在一个下拉列表中的选项中选择一个或多个选项。
下面是使用 jQuery Mobile 进行垂直选择的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>垂直选择器示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>垂直选择器示例</h1>
</div>
<div data-role="content">
<label for="select-choice-1" class="select">单选：</label>
<select name="select-choice-1" id="select-choice-1" data-native-menu="false">
<option value="select1">选择选项 1</option>
<option value="select2">选择选项 2</option>
<option value="select3">选择选项 3</option>
</select>
<label for="select-choice-2" class="select">多选：</label>
<select name="select-choice-2" id="select-choice-2" multiple="multiple" data-native-menu="false">
<option value="select1">选择选项 1</option>
<option value="select2">选择选项 2</option>
<option value="select3">选择选项 3</option>
</select>
</div>
</div>
</body>
</html>
在这个示例代码中，我们使用了 data-native-menu="false" 属性，这个属性是告诉 jQuery Mobile 不要使用原生的下拉选择框，而是使用 jQuery Mobile 提供的组件，这样可以使选择框更加美观，并且在不同的设备上都能正常显示。
同时，我们还使用了 multiple="multiple" 属性来实现多选的功能。
以上就是如何使用 jQuery Mobile 进行垂直选择的方法，它非常简单易懂，任何人都能够上手。