jQuery Mobile Select Menu：移动设备下拉框优化指南

最新推荐文章于 2025-05-27 10:43:04 发布

坑货两只

最新推荐文章于 2025-05-27 10:43:04 发布

阅读量744

点赞数 29

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_35752122/article/details/148177397

本文还有配套的精品资源，点击获取

简介：在移动端使用传统 <select> 元素存在交互与样式限制，jQuery Mobile通过Select Menu插件改善了这些问题，提供触摸友好且可定制的下拉框体验。通过JavaScript和CSS，开发者可以增强下拉框外观和功能，包括可滚动列表、搜索过滤、多选模式以及弹出/下拉行为。此外，还包括了如何触发自定义事件和使用方法，以及一些注意事项。 jQuery手机下拉框select

1. jQuery Mobile Select Menu概述

1.1 jQuery Mobile简介

jQuery Mobile是一套针对移动设备开发的轻量级的HTML5/CSS3框架。它允许开发者快速构建跨平台的移动应用。jQuery Mobile的Select Menu组件是其中的一个重要部分，它把原生的HTML选择器界面元素改造成更加适合触摸屏操作的界面，从而为用户提供更加友好、易用的交互体验。

1.2 Select Menu的特点

jQuery Mobile Select Menu具备响应式和可访问性的特点。在不同的设备上，它能够自适应屏幕尺寸，提供最佳的用户体验。其可访问性特点确保了无论是键盘用户还是屏幕阅读器用户，都能无障碍地进行操作。

1.3 应用场景

Select Menu主要被用于表单元素中，允许用户从多个选项中选择一个或多个选项。在移动设备上，它经常用于那些需要用户做出选择的交互界面，例如在表单提交前让用户选择省份、城市或者进行日期选择等。因其简洁的设计和良好的用户体验，jQuery Mobile Select Menu已成为构建移动应用的常用组件。

2. 引入jQuery Mobile库的方法

2.1 下载和引入jQuery Mobile库

2.1.1 通过CDN引入库文件

CDN（Content Delivery Network）允许您快速加载网络资源，如jQuery Mobile库。使用CDN可以加速资源加载，并减轻服务器的负担。以下是通过CDN引入jQuery Mobile库的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过CDN引入jQuery Mobile示例</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入jQuery Mobile CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <!-- 引入jQuery Mobile JS -->
    <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>jQuery Mobile 引入示例</h1>
        </div>
        <div data-role="content">
            <p>欢迎使用jQuery Mobile通过CDN引入库文件</p>
        </div>
    </div>
</body>
</html>

上述代码通过CDN引入了最新版本的jQuery库、jQuery Mobile的CSS文件和JavaScript文件。使用CDN的优势在于快速访问和缓存机制，但在网络环境不稳定的情况下，可能会导致资源加载失败。

2.1.2 本地文件引入方法

有时网络环境限制或出于性能考虑，我们会选择将库文件下载到本地服务器进行引入。通过本地文件引入，可以保证在任何环境下都能稳定加载库文件。以下是通过本地文件引入jQuery Mobile库的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>本地文件引入jQuery Mobile示例</title>
    <!-- 引入本地jQuery库 -->
    <script src="path/to/local/jquery.min.js"></script>
    <!-- 引入本地jQuery Mobile CSS -->
    <link rel="stylesheet" href="path/to/local/jquery.mobile.min.css" />
    <!-- 引入本地jQuery Mobile JS -->
    <script src="path/to/local/jquery.mobile.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

请替换 path/to/local/ 为本地库文件的实际路径。通过本地文件引入，页面加载速度可能会加快，且不受外部网络环境的影响。但需注意本地库文件的版本更新和维护。

2.2 库文件版本选择与兼容性

2.2.1 不同版本特性对比

jQuery Mobile自发布以来，经历了多个版本的迭代，每个版本都包含了一些增强特性和修复。在选择库文件版本时，需对比各版本之间的特性差异。以下是一些主要版本之间的特性对比：

1.4.x ：重点优化了性能，改进了对桌面浏览器的支持，但不再支持IE8及更早版本的浏览器。
1.3.x ：对触控和手势的改进，修复了在移动设备上的兼容性问题。
1.2.x ：增强了表单元素的功能，提升了可访问性。

建议根据项目需求和技术栈进行版本选择。例如，如果项目需要支持老旧浏览器，则应选择1.3.x或更早的版本；如果对性能和现代浏览器支持有要求，则可选择1.4.x版本。

2.2.2 浏览器兼容性分析

jQuery Mobile旨在支持广泛的移动浏览器。然而，由于移动浏览器的多样性，开发者需注意浏览器的兼容性问题。以下是一些常见的兼容性问题点：

老旧浏览器 ：如IE8及更早版本的浏览器不支持jQuery Mobile。
桌面与移动设备差异 ：一些桌面浏览器可能无法完全支持移动视图下的特性。
Android旧版系统 ：较低版本的Android系统（如Android 4.x）可能存在兼容性问题。

对于移动设备，jQuery Mobile通常表现良好，但开发者应确保在目标设备上进行充分的测试。对于老旧设备和浏览器，可以使用如Respond.js这样的polyfill来解决某些兼容性问题，或者考虑为这些用户降级到更简单的网站版本。

为了确保应用在各种设备和浏览器上正常工作，开发者可以使用自动化测试工具和手动测试来检查和解决兼容性问题。工具如BrowserStack和Sauce Labs提供真实设备和浏览器的测试环境，有助于开发者测试和解决兼容性问题。

3. 选择器和主题的自定义方式

3.1 jQuery Mobile选择器使用技巧

选择器是编程中用于选取特定元素的语言结构。在jQuery Mobile中，选择器的使用是构建动态交互式界面的基础。它扩展了jQuery的核心选择器，添加了移动端特有的选择器，用于更有效地选择和操作移动页面中的元素。

3.1.1 选择器的基本语法

在jQuery Mobile中，基本选择器与核心jQuery的选择器几乎相同，但增加了不少为了移动设备优化的伪类选择器。例如，可以使用 $.mobile.activePage 来获取当前激活页面的引用。基础的jQuery选择器语法如下：

// 选择页面中所有的段落元素
$("p")

此外，jQuery Mobile为响应式设计提供了一些专用的选择器，例如 $.mobile.activePage.find('li:jqmData(role="page")') 可以用来选择当前活动页面中所有有特定角色属性的列表项。通过这些选择器，我们可以更灵活地操作DOM，实现复杂的功能。

3.1.2 选择器的高级用法

高级用法包括属性选择器、表单选择器、以及特定的结构性选择器等。例如，想要选择所有在 header 、 footer 和 content 区域内的表单元素，可以使用如下代码：

$( "form", ".ui-page-active header, .ui-page-active footer, .ui-page-active .ui-content" )

在某些情况下，为了实现特定的交互效果，可能需要创建自定义选择器。这通常可以通过扩展jQuery的 .selector 属性来完成，然后就可以像使用原生jQuery选择器一样使用它们。

$.extend($.mobile.selectors, {
    customHeader: function() {
        // 实现自定义选择逻辑
    }
});

// 使用自定义选择器
$( "customHeader" )

高级选择器不仅帮助开发者快速定位DOM元素，而且还可以在保持代码的可读性和可维护性的前提下，大幅提高开发效率。

3.2 主题自定义与应用

主题是jQuery Mobile的一个重要特性，它允许开发者通过简单的修改来改变界面的样式和感觉。主题的自定义和应用不仅增强了用户体验，也使得界面设计更加一致和专业。

3.2.1 主题的结构与变量定义

jQuery Mobile的主题是一组包含颜色变量、字体大小、间距等的CSS样式集合。每个主题都由不同的"色调"组成，你可以创建不同的"色调"来定义主题的外观。

定义一个主题，首先要理解它的结构。在 theme.css 文件中，主题的结构遵循特定的命名约定。例如，定义一个标题栏的样式可能是这样的：

.ui-bar-a {
    background-color: #f33; /* 背景颜色 */
    color: #fff; /* 文本颜色 */
}

在定义主题时，通常需要设置一系列的颜色变量，并且有意识地遵循色彩学的规则。这样可以保证在不同的设备和环境下，色彩的对比和兼容性。

3.2.2 如何创建自定义主题

创建自定义主题通常遵循以下步骤：

定义主题变量 ：在你的样式表中定义新的主题变量。
创建主题文件 ：将这些变量应用到实际的样式规则中，生成新的主题文件。
链接主题文件 ：在你的HTML文件中链接新创建的主题文件。
测试与调整 ：在不同设备上测试主题的显示效果，并根据需要进行调整。

.my-custom-theme {
    /* 定义变量 */
    --header-background: #123456;
    --content-background: #ffffff;
}

/* 使用主题变量 */
.my-custom-theme .ui-header {
    background: var(--header-background);
}

.my-custom-theme .ui-content {
    background: var(--content-background);
}

之后，通过链接自定义的CSS文件：

<link rel="stylesheet" href="path/to/my-custom-theme.css" />

通过上述步骤，你可以创建一个符合自己项目需求的自定义主题，并应用到整个应用中，以获得统一的视觉效果。

在本章节中，我们深入探讨了选择器的使用技巧以及如何创建和应用自定义主题。在下一章节中，我们将继续深入，探讨如何通过功能增强选项进一步丰富我们的jQuery Mobile应用。

4. 功能增强选项介绍

4.1 可滚动列表的实现

4.1.1 列表滚动的基本原理

在Web应用中，可滚动列表是一项非常实用的功能，它允许用户在有限的视图区域内查看和滚动大量的数据项。jQuery Mobile通过引入一些特定的属性和方法，简化了实现可滚动列表的过程。

data-role="listview" 属性是实现可滚动列表的关键。当这个属性被添加到 <ul> 或 <ol> 元素上时，jQuery Mobile会自动应用滚动行为和触摸优化。为了确保滚动效果能够顺利实现，元素必须拥有一个高度。在大多数情况下，可以通过设置 height: 100% 来让列表填满父容器的高度，这在滚动区域超出视口大小时尤为重要。

滚动列表的动态加载可以通过监听列表的滚动事件（ 滚动事件 ）来实现。当用户滚动接近列表的底部时，可以触发一个Ajax调用来加载更多的列表项。这种分页加载数据的方式，不仅提升了用户体验，还减少了初始加载时间和带宽消耗。

4.1.2 滚动列表的优化技巧

为了提高滚动列表的性能和用户体验，我们可以使用一些优化技巧。例如，使用虚拟滚动技术，即只渲染用户当前可见的数据项，而不是渲染整个列表的所有项。这可以显著提高性能，尤其是在长列表中。

另一个技巧是避免在滚动列表中使用过大的图片或复杂的内容。如果内容超出了列表项的高度，用户滚动时的卡顿现象会更加明显。在处理这些情况时，我们可以通过限制图片的大小或使用缩略图来优化性能。

另外，通过监听滚动事件来实现节流（throttling）也是一个有用的技巧。节流可以限制在指定的时间内，滚动事件处理器只能执行一次。这样，即使用户快速滚动列表，触发的事件也不会过于频繁，从而避免了不必要的性能开销。

下面是一个使用jQuery Mobile实现可滚动列表的代码示例，并包含了一些优化技巧：

$(document).on('pagebeforeshow', '#page', function() {
  var $listview = $('#myListView').listview().on('scroll', function() {
    // 节流滚动事件
    if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
      // 模拟加载更多数据
      // 这里可以使用Ajax请求获取新数据，然后追加到列表中
    }
  });
});

4.2 搜索过滤与多选模式

4.2.1 搜索过滤功能的实现

搜索过滤功能是让列表可以根据用户的输入实时过滤显示的结果，极大地提高了用户查找信息的效率。为了在jQuery Mobile中实现搜索过滤，我们可以使用 data-filter 属性来开启这个功能。当添加了此属性后，jQuery Mobile会自动在列表的顶部添加一个输入框，用户可以通过输入文字来进行搜索。

搜索过滤功能的性能优化可以通过缓存筛选结果来实现。当用户输入过滤条件时，可以先检查是否有已经筛选过的数据项可以复用，如果没有，再从原始数据中进行筛选。这样可以减少不必要的数据处理和DOM操作。

下面是一个简单的搜索过滤功能的HTML和JavaScript代码示例：

<ul data-role="listview" data-filter="true">
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  ...
</ul>

$(document).on('pagebeforeshow', '#page', function() {
  $('#myList').on('filterablebeforefilter', function(event, ui) {
    // 执行搜索前的额外处理
  });
});

4.2.2 多选模式的设置与应用

多选模式允许用户从列表中选择多个项目。在jQuery Mobile中，通过设置 data-filter 属性为 true ，并在 <li> 元素中添加 data-icon="false" 和 data-iconpos="notext" ，可以使得列表项看起来更简洁。此外，我们还需要添加一个按钮来触发多选模式。

多选模式的实现需要监听列表项的点击事件，来切换它们的选中状态。当选中状态发生变化时，可以更新一个显示选中项数量的计数器，并在用户完成选择后，执行相关的操作，如删除选中的项或者进行批量操作。

<ul data-role="listview" data-filter="true">
  <li data-icon="false" data-iconpos="notext">List item 1</li>
  <li data-icon="false" data-iconpos="notext">List item 2</li>
  ...
</ul>
<button id="selectButton">选择项</button>

$(document).on('pagebeforeshow', '#page', function() {
  $('#myList').on('click', 'li', function() {
    var $this = $(this);
    if($this.hasClass('ui-li-active')) {
      $this.removeClass('ui-li-active');
    } else {
      $this.addClass('ui-li-active');
    }
  });
  $('#selectButton').on('click', function() {
    // 执行选中项处理逻辑
  });
});

4.3 弹出/下拉行为定制

4.3.1 弹出行为的工作原理

在jQuery Mobile中，弹出行为允许元素通过点击事件显示额外内容，这些元素可能隐藏在页面的其他位置。这些弹出元素通常用于显示菜单、对话框或其他详细信息。

弹出元素是通过 data-rel="popup" 属性来标记的，当点击触发元素时，jQuery Mobile会显示一个带有动画的弹出层。弹出层的结构通常使用 div 元素，拥有 data-role="popup" 属性，并且设置合适的尺寸和位置。

开发者可以通过定义CSS来定制弹出层的外观，如背景颜色、边框、阴影等。此外，还可以通过JavaScript动态修改弹出层的内容，从而实现更加丰富的交互体验。

下面是一个简单的弹出行为的HTML和JavaScript代码示例：

<a href="#myPopup" data-rel="popup" data-position-to="window">Show popup</a>
<div data-role="popup" id="myPopup" data-overlay-theme="a">
  <p>This is a test popup.</p>
</div>

$(document).on('pagebeforeshow', '#page', function() {
  // 可以添加自定义的弹出行为处理逻辑
});

4.3.2 下拉行为的定制方法

下拉行为指的是当用户与某个元素交互时（例如点击一个按钮），能够触发一个下拉菜单显示额外的内容。在jQuery Mobile中，下拉菜单通常是通过 data-role="controlgroup" 和 data-type="horizontal" 属性来实现的。

下拉菜单可以包含单选按钮或复选框，并且支持多种类型的定制。比如可以设置不同的主题，添加图标，或者调整尺寸以适应不同的设计需求。

开发者可以通过自定义样式和脚本来增加下拉菜单的功能性。例如，可以监听下拉菜单的变化事件，根据用户的选择执行特定的逻辑处理。还可以通过JavaScript动态地修改下拉菜单的内容和状态。

下面是一个简单的下拉菜单的HTML和JavaScript代码示例：

<div data-role="controlgroup" data-type="horizontal">
  <input type="radio" name="options" id="option1" value="1">
  <label for="option1">Option 1</label>

  <input type="radio" name="options" id="option2" value="2">
  <label for="option2">Option 2</label>

  <input type="radio" name="options" id="option3" value="3">
  <label for="option3">Option 3</label>
</div>

$(document).on('pagebeforeshow', '#page', function() {
  // 可以添加自定义的下拉行为处理逻辑
});

4.1.3 列表滚动的优化技巧

在实现滚动列表时，优化是确保用户流畅体验的关键。以下是一些优化技巧：

节流滚动事件 ：滚动事件的高频触发可能会导致性能问题。通过节流（throttle）技术，限制事件处理函数在一定时间内的执行频率，可以显著减少性能消耗。
虚拟滚动 ：对于长列表，不必渲染所有的列表项。可以只渲染用户当前可视区域内的项，并在滚动时动态加载和卸载列表项，这样既提高了性能，也优化了内存使用。
CSS优化 ：使用CSS3的transform属性进行滚动，它可以利用硬件加速，使滚动更加流畅。例如，使用 transform: translate3d(0,0,0); 来提升性能。
最小化DOM操作 ：滚动时，应尽量避免复杂的DOM操作。如果需要动态地显示或隐藏列表项，可以仅通过改变CSS类来控制显示状态，而不是创建或删除DOM元素。
合理使用分页 ：在某些情况下，可以实现分页来管理大量数据。用户可以加载有限数量的数据项，当需要查看更多数据时，再通过Ajax请求加载下一页数据。
优化数据结构 ：如果列表项是由复杂的对象或模型组成，确保这些对象在展示时是“扁平化”的。这意味着应当将复杂对象转化为字符串或简单对象，以减少解析和渲染所需的时间。

通过上述优化方法，可以确保即使在数据量大的情况下，滚动列表也能保持流畅，从而提供良好的用户体验。

5. 自定义事件和方法

5.1 自定义事件的触发与处理

5.1.1 `create` 事件的触发时机

create 事件是jQuery Mobile在组件初始化完成后触发的自定义事件，这为开发者提供了一个机会，在页面组件完全初始化后执行额外的逻辑。这对于需要在页面加载完毕后立即进行初始化设置或数据同步的情况尤为重要。

$(document).on("pagecreate", "#page1", function() {
    // 页面创建完成后的逻辑处理
    console.log("Page 1 created");
});

在上述代码中，我们监听了 pagecreate 事件，这是当页面初始化时触发的 create 事件的别名。这里特别注意选择器 "#page1" ，它用于指定在哪个页面上触发 create 事件。当页面 #page1 被创建后，会执行回调函数中的代码。

5.1.2 其他常用自定义事件分析

除了 create 事件外，jQuery Mobile还提供了一系列其他自定义事件，如 pagebeforeshow （在页面显示之前触发）、 pagebeforehide （在页面隐藏之前触发）等。这些事件允许开发者在特定的时机干预页面的显示和隐藏过程。

$(document).on("pagebeforeshow", "#page1", function() {
    // 页面显示之前执行的逻辑
    console.log("Page 1 is about to show");
});

上述代码展示了如何在页面 #page1 显示之前执行特定的逻辑。自定义事件是扩展和个性化jQuery Mobile应用的重要手段，利用这些事件，可以为用户提供更加丰富和流畅的交互体验。

5.2 方法的调用与应用

5.2.1 `.selectmenu('refresh')` 方法详解

.selectmenu('refresh') 方法是jQuery Mobile中用于重新渲染选择菜单的内置方法。调用这个方法可以确保在动态更改选择菜单后，选择器的UI能够正确更新以反映新的状态。

$("#selectmenu").selectmenu("refresh");

在上述代码中， $("#selectmenu") 定位到一个ID为 selectmenu 的选择器，然后调用 .selectmenu("refresh") 方法来更新它。这个方法在添加、删除或修改了选择菜单选项后非常有用。

5.2.2 其他方法的应用案例

除了 refresh 方法外，jQuery Mobile还提供了其他一些方法用于操作选择器，例如 disable 和 enable 。这些方法可以用来控制选择器的可用状态。

// 禁用选择器
$("#selectmenu").selectmenu("disable");

// 启用选择器
$("#selectmenu").selectmenu("enable");

在使用这些方法时，需要确保正确传递了方法名称作为字符串参数。它们在需要临时禁用或启用选择器时特别有用，比如在表单提交前验证用户输入或在特定的操作过程中防止用户做出选择。

为了更深入理解这些方法的应用，我们可以进一步展示一个表格，以说明各种方法的用途和调用方式。

| 方法名 | 用途 | 调用示例 | |----------------|------------------------------------------|----------------------------------------| | refresh | 重新渲染选择菜单 | $("#selectmenu").selectmenu("refresh"); | | disable | 禁用选择器 | $("#selectmenu").selectmenu("disable"); | | enable | 启用选择器 | $("#selectmenu").selectmenu("enable"); | | open | 强制选择菜单打开 | $("#selectmenu").selectmenu("open"); | | close | 强制选择菜单关闭 | $("#selectmenu").selectmenu("close"); |

通过表格，我们可以一目了然地看到每个方法的功能，以及它们的使用场景和方式。这有助于开发者根据具体需求快速选择合适的方法来实现所需功能。

6. 示例代码演示

6.1 简单下拉框的实现

6.1.1 HTML结构设置

一个基本的下拉框结构通常包括一个按钮和一个弹出菜单。在HTML中，可以通过 <select> 标签实现，但是为了使用jQuery Mobile框架来增强其功能和外观，我们需要添加一些特定的类名。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Select Menu 示例</title>
    <link rel="stylesheet" href="路径到你的jquery.mobile.css文件" />
    <script src="路径到你的jquery.js文件"></script>
    <script src="路径到你的jquery.mobile.js文件"></script>
</head>
<body>
    <div data-role="page" id="index" class="ui-responsive">
        <div data-role="content">
            <label for="select-menu">选择一个水果:</label>
            <select name="select-native" id="select-menu">
                <option value="apple">苹果</option>
                <option value="banana">香蕉</option>
                <option value="orange">橙子</option>
                <option value="watermelon">西瓜</option>
            </select>
        </div>
    </div>
</body>
</html>

在上述的HTML代码中，我们创建了一个名为 select-menu 的下拉选择框，并为其添加了 data-role="selectmenu" 属性以触发jQuery Mobile的增强功能。

6.1.2 jQuery代码实现

为了启用jQuery Mobile框架增强的选择菜单，我们需要在页面加载完毕后初始化这个选择框：

$(document).ready(function() {
    $("#select-menu").selectmenu();
});

以上代码片段需要在引入jQuery及jQuery Mobile库之后执行。这行代码使用了jQuery Mobile的 .selectmenu() 方法来增强标准的 <select> 元素，使其拥有更加友好和美观的界面。

6.2 高级功能的代码实现

6.2.1 滚动列表的JavaScript代码

为了创建一个具有滚动功能的下拉菜单，需要通过jQuery Mobile提供的 data-filter="true" 属性来实现搜索过滤， data-inset="true" 属性来嵌入式样，以及 data-native-menu="false" 属性来禁用原生菜单，以获得更好的跨平台兼容性。

<select name="select-menu" id="select-menu" data-native-menu="false" data-filter="true" data-inset="true">
    <!-- 选项与示例6.1.1相同 -->
</select>

$(document).on('pagebeforeshow', '#index', function(event){
    $("#select-menu").selectmenu({
        // 这里可以添加更多参数来自定义滚动列表的行为
    });
});

在初始化 selectmenu 时，也可以传入更多参数来自定义其行为。例如，我们可以设置滚动列表的 threshold 参数来定义过滤阈值，或者使用 enhanced: true 属性启用增强模式以获得更流畅的用户体验。

6.2.2 搜索过滤与多选的代码示例

为了实现搜索过滤和多选功能，我们需要将 <select> 元素更改为 <input> 元素，并添加 data-role="listview" 以及 data-multipicker="true" 属性。这样可以为用户提供一个更为复杂但功能更强大的选择器。

<div data-role="fieldcontain">
    <label for="select-native">选择多个水果:</label>
    <input type="text" name="select-native" id="select-native" data-native-menu="false" data-role="listview" data-multipicker="true" data-inset="true"/>
</div>

在jQuery中初始化这个多选器的方法如下：

$(document).on('pagebeforeshow', '#index', function(event){
    $("#select-native").selectmenu({
        mode: 'multiple',
        select: function(event, ui) {
            var selectedOptions = '';
            $.each(ui.items, function(index, item){
                selectedOptions += $(item).text() + ' ';
            });
            alert('选择的水果有: ' + selectedOptions);
        }
    });
});

以上代码段创建了一个可以进行多选的输入框，并且在用户选择多个选项后弹出一个包含所有选中项的提示框。需要注意的是，多选模式的设置是通过 mode: 'multiple' 参数实现的。

通过以上示例，我们可以看到如何通过简单HTML和jQuery Mobile的代码组合实现丰富交互的下拉菜单功能。这些示例为开发者提供了一种快速实现和部署这些功能的方法。

7. 使用注意事项

7.1 兼容性问题处理

7.1.1 常见兼容性问题及解决方案

在开发使用 jQuery Mobile 的应用时，可能会遇到一些兼容性问题，这些问题往往由于不同浏览器对 HTML5 和 CSS3 的支持程度不一导致。为确保应用在主流浏览器中均能正常运行，我们可以采取以下措施：

使用特性检测： 通过 polyfills 或者像 Modernizr 这样的库来检测和填充不同浏览器之间的功能差异。
避免使用实验性代码： 尽量使用稳定的 CSS3 属性和 JavaScript API，直到它们被广泛支持。
CSS3 前缀： 对于 CSS3 的新特性，比如 transition 和 transform，需要添加浏览器特定的前缀，例如 -webkit- , -moz- , -ms- 和 -o- 。

/* CSS3 前缀示例 */
.my-element {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}