如何在 JQuery 上使用自定义样式的选择菜单？答案

【问题标题】：How do I use custom-styled select menus on JQuery?如何在 JQuery 上使用自定义样式的选择菜单？
【发布时间】：2011-12-29 22:23:10
【问题描述】：

我看到some beautiful select menus，显然是用 JQuery 生成的，脚本如下：

<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>

当我尝试该脚本时，它只是生成了没有 JQuery 自定义样式的默认选择菜单。我想这是有道理的，但是我如何指定我希望上面的代码使用我在上面的链接中找到的自定义样式？

注意：我最终希望我的软件能够移动，但我认为我现在并没有真正使用 JQuery Mobile；我可能刚刚导入了标准的 JQuery UI，据我所知，它可能包含也可能不包含自定义样式。我还查看了其他相关问题，但没有理解答案。

【问题讨论】：

愚蠢的问题：但是您是否包含了 jQuery 移动文件？
你已经在Note:回答了你自己的问题
可能你没有包含 jQuery。能否给出完整的代码？
在运行到 SO 并提出这个问题之前，您是否尝试过包含 jQuery Mobile？如果您不包含脚本，为什么您希望它能够工作？

标签： jquery jquery-ui jquery-selectors jquery-mobile

【解决方案1】：

您声明您不包括 jQuery Mobile，这意味着您没有很棒的选择菜单！您不必以编程方式创建样式选择菜单，如果您包含 jQuery Mobile 文件，jQuery Mobile 会自动创建。

jQuery Mobile 的 JS 和 CSS 文件都需要包含在您的页面中：

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

来源：http://jquerymobile.com/download/

请注意，jQuery Mobile 和 jQuery UI 是完全不同的库；虽然它们都需要 jQuery Core。

【讨论】：

如果你只想使用 jQuery Mobile 中的一些或一个小部件，你可以告诉框架只初始化特定的小部件，这里是这样做的文档：jquerymobile.com/demos/1.0/docs/api/globalconfig.html跨度>
听起来棒极了！但是我可以这样做并且仍然保留仅使用标准 JQuery UI 构建的元素，例如滑块、主题和样式？当我尝试导入移动端 JS 和 CSS 时，我看到了一些东西，然后它就消失了？
@BrianSchmitz 这里有太多无法回答的问题。 jQuery Mobile 有一点学习曲线。您要做的是阅读 jQuery Mobile 的文档以熟悉自己，有一些基本的 Page Structure 文档可以帮助您入门：jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html
或者更好的是，我可以将移动设备严格应用于选择菜单吗？或者我是否需要避免使用标准的 JQuery UI 并从头开始在 JQuery mobile 中构建它，以使其与移动设备长期兼容？

【解决方案2】：

您的选择列表可能没有被 jquery 库设置样式有几个原因。首先，确保所有 jquery 库都已加载 - 检查 firebug http://getfirebug.com/ - 或 google chrome 检查器。确保你已经从上面的演示中加载了 css。

可能导致问题的一件事 - 如果这些 html 元素是在 jquery 访问它们之前定义的，那么脚本将无法找到它们。确保将 javascript 代码放入 $(function() { (your javascript) } );或者把它放在页面底部，就在正文结束标记之前。

如果您在临时网站或http://jsfiddle.net/ 上发布您所拥有的内容会有所帮助 - 如果没有更多信息，很难说出了什么问题。

【讨论】：