菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 表单选择菜单

likuolei

jQuery Mobile 表单选择菜单（Select Menus）详解

选择菜单（Select Menus） 是 jQuery Mobile 的 下拉选择组件，自动增强原生 <select>，支持 单选、多选、图标、搜索、弹窗、分组、自定义图标 等，移动端触控体验极佳。

无需 JS，只需 HTML + data-* 属性！

1. 基本结构

<label for="country">国家：</label>
<select name="country" id="country">
  <option value="BE" selected>比利时</option>
  <option value="CN">中国</option>
  <option value="US">美国</option>
</select>

jQM 自动增强为 圆角下拉按钮

2. 选择菜单类型

类型写法效果
原生下拉默认小屏原生选择器
自定义菜单data-native-menu="false"弹窗式菜单（推荐）
多选<select multiple>复选框列表
带图标data-icon="grid"按钮图标
搜索过滤data-filter="true"搜索选项
分组<optgroup>分组显示

3. 完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 选择菜单</title>
  <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.1.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" data-position="fixed">
    <h1>选择菜单大全</h1>
  </div>

  <div data-role="main" class="ui-content">

    <form>

      <!-- 1. 基础下拉（弹窗式） -->
      <div class="ui-field-contain">
        <label for="country">国家：</label>
        <select name="country" id="country" data-native-menu="false">
          <option value="BE" selected>比利时</option>
          <option value="CN">中国</option>
          <option value="US">美国</option>
          <option value="FR">法国</option>
          <option value="DE">德国</option>
        </select>
      </div>

      <!-- 2. 带图标 + 小号 -->
      <div class="ui-field-contain">
        <label for="lang">语言：</label>
        <select name="lang" id="lang" data-native-menu="false" 
                data-icon="gear" data-mini="true">
          <option value="zh">中文</option>
          <option value="en" selected>English</option>
          <option value="fr">Français</option>
        </select>
      </div>

      <!-- 3. 多选菜单 -->
      <div class="ui-field-contain">
        <label for="hobby">兴趣（多选）：</label>
        <select name="hobby" id="hobby" multiple data-native-menu="false">
          <option value="read">阅读</option>
          <option value="sport" selected>运动</option>
          <option value="music" selected>音乐</option>
          <option value="travel">旅行</option>
        </select>
      </div>

      <!-- 4. 分组菜单 -->
      <div class="ui-field-contain">
        <label for="city">城市：</label>
        <select name="city" id="city" data-native-menu="false">
          <optgroup label="欧洲">
            <option value="brussels" selected>布鲁塞尔</option>
            <option value="paris">巴黎</option>
            <option value="berlin">柏林</option>
          </optgroup>
          <optgroup label="亚洲">
            <option value="beijing">北京</option>
            <option value="tokyo">东京</option>
          </optgroup>
        </select>
      </div>

      <!-- 5. 带搜索过滤（长列表） -->
      <div class="ui-field-contain">
        <label for="province">省份（带搜索）：</label>
        <select name="province" id="province" data-native-menu="false" data-filter="true">
          <option value="antwerp">安特卫普</option>
          <option value="flanders">弗拉芒</option>
          <option value="wallonia">瓦隆</option>
          <option value="brussels">布鲁塞尔首都区</option>
          <!-- 更多选项... -->
        </select>
      </div>

      <!-- 6. 翻转开关（特殊选择） -->
      <div class="ui-field-contain">
        <label for="wifi">Wi-Fi：</label>
        <select name="wifi" id="wifi" data-role="flipswitch" data-mini="true">
          <option value="off">关</option>
          <option value="on" selected>开</option>
        </select>
      </div>

      <!-- 7. 滑块选择（替代下拉） -->
      <div class="ui-field-contain">
        <label for="rating">评分：<span id="rate-val">3</span>/5</label>
        <select name="rating" id="rating" data-role="slider" data-mini="true">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3" selected>3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>

      <!-- 8. 原生下拉（小屏优化） -->
      <div class="ui-field-contain">
        <label for="theme">主题（原生）：</label>
        <select name="theme" id="theme">
          <option value="light" selected>浅色</option>
          <option value="dark">深色</option>
        </select>
      </div>

      <!-- 9. 提交按钮 -->
      <button type="submit" class="ui-btn ui-btn-b ui-corner-all ui-shadow">
        提交选择
      </button>

    </form>

    <!-- 10. 当前用户信息 -->
    <div style="margin-top:30px; padding:15px; background:#e6f7ff; border-radius:8px;">
      <h4>实时信息</h4>
      <p><strong>时间：</strong>2025年11月17日 03:11（CET）</p>
      <p><strong>国家：</strong>比利时 (BE)</p>
    </div>

  </div>

  <div data-role="footer" data-position="fixed">
    <h4>比利时 © 2025</h4>
  </div>
</div>

<!-- 评分滑块实时显示 -->
<script>
$(document).on("pagecreate", function() {
  $("#rating").on("change", function() {
    $("#rate-val").text($(this).val());
  });
});
</script>

</body>
</html>

4. 选择菜单属性汇总

属性值说明
data-native-menu="false"true/false弹窗菜单（推荐）
data-icon="gear"图标名按钮图标
data-mini="true"—小号
multiple—多选
data-role="flipswitch"—变为 开关
data-role="slider"—变为 滑块选择
data-filter="true"—选项内 搜索

5. JavaScript 控制

<script>
$(document).on("pagecreate", function() {
  // 获取值
  var country = $("#country").val();

  // 设置值
  $("#country").val("CN").selectmenu("refresh");

  // 监听变化
  $("#country").on("change", function() {
    console.log("选择了：" + $(this).val());
  });

  // 刷新（动态选项后）
  $("#country").selectmenu("refresh");
});
</script>

6. 最佳实践

建议说明
使用 data-native-menu="false"统一体验
选项 > 6 个时加 data-filter="true"支持搜索
多选用 multiple自动变复选列表
开关用 flipswitch更直观
动态选项后调用 selectmenu("refresh")必须

7. 常见问题

问题解决方案
下拉不弹窗必须 data-native-menu="false"
动态选项不显示调用 .selectmenu("refresh")
搜索框不出现必须 data-filter="true"
多选无复选框确保 multiple 属性

8. 推荐模板

<!-- 标准弹窗下拉 -->
<label for="sel">选择：</label>
<select id="sel" data-native-menu="false">
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
</select>

<!-- 多选带搜索 -->
<select multiple data-native-menu="false" data-filter="true">
  <option>选项A</option>
  <option selected>选项B</option>
</select>

<!-- 开关 -->
<select data-role="flipswitch">
  <option value="off">关</option>
  <option value="on">开</option>
</select>

总结：选择菜单类型选择

场景推荐写法
国家/语言data-native-menu="false"
兴趣多选multiple
长列表data-filter="true"
开关data-role="flipswitch"
评分data-role="slider"

需要我为你生成：

  • 级联下拉菜单（省份 → 城市）？
  • 带图片的选项菜单？
  • 自定义弹窗样式的 Select？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部