JQuery 手机 Select 盒子不工作

Question

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

When I test it on my mobile there is no dropdown... actually, nothing hapens at all.

I'm I forgetting something?

Answer 1

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

<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

data-native-menu="false" 

Answer 2

I had the same problem and the decision is in the connected libraries

I include in head tag this 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!

Answer 3

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 Mobile in your list of scripts.

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.

Answer 4

looks like a direct copy paste from the link did you include jquery and jquery mobile ?