Question

我看到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，它可能包括也可能不包括我所知道的自定义样式。我也看过其他相关问题，但不明白答案。

Answer 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。

Answer 2

jquery库可能无法为您的选择列表设置样式，这有几个原因。首先，确保jquery库都已加载 - 请使用firebug http://getfirebug.com/或Google Chrome检查器进行检查。确保你已经从上面的演示中加载了css。

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

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

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

2 个答案: