javascript JQuery 移动选择框不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6138321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile Select Box not working
提问by Satch3000
This is getting a bit crazy. I have been trying the code for hours now and no luck:
这变得有点疯狂。我已经尝试了几个小时的代码，但没有运气：
<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>
</div>
From:
从：
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-selects.html
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-selects.html
When I test it on my mobile there is no dropdown ... actually, nothing hapens at all.
当我在我的手机上测试它时，没有下拉菜单......实际上，什么也没有发生。
I'm I forgetting something?
我是不是忘记了什么？
回答by Phill Pafford
If you look at the source of the web page you can see it's in a form tag:
如果您查看网页的源代码，您可以看到它位于表单标签中：
<form action="#" method="get">
So Adding this between the form tags would get the desired results: Live Example Link
所以在表单标签之间添加这个会得到想要的结果：Live Example Link
<form action="#" method="get">
<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>
</div>
</form>
Another problem it could be:
另一个问题可能是：
Try adding this tag to the dropdown: Live Example Link
尝试将此标签添加到下拉列表中：Live Example Link
data-native-menu="false"
回答by 1nstinct
I had the same problem and the decision is in the connected libraries
我遇到了同样的问题，决定是在连接的库中
I include in head tag this css
我在 head 标签中包含这个 css
code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css
and this
还有这个
code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js
and all works well!
一切正常！
回答by SpyderScript
I had this issue recently, and the accepted answer did not fix it for me. In the process of creating a question on it, I figured out the solution:
我最近遇到了这个问题，接受的答案并没有为我解决这个问题。在创建问题的过程中，我想出了解决方案：
When using both jQuery UI and jQuery Mobile, UI must come before Mobilein your list of scripts.
当同时使用 jQuery UI 和 jQuery Mobile 时，UI 必须在您的脚本列表中排在 Mobile 之前。
I had this:
我有这个：
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Which resulted in UI having precedence over my form elements, especially noticeable in select menus. I switched these statements, and the menus were enhanced by Mobile properly.
这导致 UI 优先于我的表单元素，尤其是在选择菜单中。我切换了这些语句，并且 Mobile 正确增强了菜单。
回答by mcgrailm
looks like a direct copy paste from the link did you include jqueryand jquery mobile?
看起来像是从链接中直接复制粘贴的，您是否包含jquery和jquery mobile？
