<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 表单选择示例</title>
<!-- 引入 jQuery Mobile CSS 文件 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 文件 -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- 引入 jQuery Mobile 文件 -->
<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">
<!-- 单选框 -->
<fieldset data-role="controlgroup">
<legend>性别:</legend>
<label for="male">男</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">女</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
<!-- 复选框 -->
<fieldset data-role="controlgroup">
<legend>兴趣:</legend>
<label for="reading">阅读</label>
<input type="checkbox" name="interest" id="reading" value="reading">
<label for="traveling">旅行</label>
<input type="checkbox" name="interest" id="traveling" value="traveling">
</fieldset>
<!-- 下拉框 -->
<label for="select-choice">选择国家:</label>
<select name="select-choice" id="select-choice">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
<option value="japan">日本</option>
</select>
<!-- 提交按钮 -->
<button type="submit" data-theme="b">提交</button>
</div>
<div data-role="footer">
<h4>© 2023 jQuery Mobile 示例</h4>
</div>
</div>
</body>
</html>
这个示例包含了单选框、复选框和下拉框的演示。你可以根据需要自行修改选项和样式。请确保引入了正确版本的 jQuery 和 jQuery Mobile。这样，jQuery Mobile 将会根据设备的屏幕大小和方向提供合适的样式，使表单在移动设备上获得更好的用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/9430/jQuery Mobile