📅 最后修改于: 2023-12-03 14:51:56.631000 🧑 作者: Mango
jQuery Mobile是一种用户界面框架，用于为移动设备创建交互式网页。Optgroup是一种HTML元素，可将选择字段分组并提供可读的标签。在本文中，我们将介绍如何使用jQuery Mobile创建Optgroup选择。
要使用jQuery Mobile，需要在HTML文件中引入jQuery库和jQuery Mobile库。这可以通过使用以下代码来完成：
<head>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
接下来，我们将创建一个选择字段元素，其中包含Optgroup子元素。我们可以使用以下代码来创建选择字段元素：
<select name="optgroup-select" id="optgroup-select" data-native-menu="false">
<optgroup label="Group 1">
<option value="1">Option 1-1</option>
<option value="2">Option 1-2</option>
</optgroup>
<optgroup label="Group 2">
<option value="3">Option 2-1</option>
<option value="4">Option 2-2</option>
</optgroup>
</select>
在上面的代码中，我们创建了一个select元素，并设置了data-native-menu属性为false，以便使用jQuery Mobile的自定义菜单选项。然后，我们创建了两个Optgroup元素，其中每个元素包含两个option子元素。
最后一步是初始化选择字段，以便使用jQuery Mobile的自定义菜单选项。我们可以使用以下代码来完成：
$(document).on("pagecreate","#page-one",function(){
$("select[data-native-menu='false']").selectmenu();
});
在上面的代码中，我们使用jQuery的on方法，在页面创建时初始化了所有带有data-native-menu属性的选择字段。
使用上述步骤，我们可以使用jQuery Mobile轻松创建带有Optgroup的选择字段。此外，我们还可以使用其他选项和属性来定制选择字段的外观和功能。