2

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?

Satch3000
  • 47,356
  • 86
  • 216
  • 346

4 Answers4

9

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"
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
1

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!

animuson
  • 53,861
  • 28
  • 137
  • 147
1nstinct
  • 1,745
  • 1
  • 26
  • 30
0

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.

swinn
  • 869
  • 1
  • 16
  • 46
0

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

mcgrailm
  • 17,469
  • 22
  • 83
  • 129
  • Yes, it is ... Is that not an example? – Satch3000 May 26 '11 at 12:32
  • it is an example and if thats the exact markup you used thets great but if its not then we need to see the markup you did use. also still wondering about including the files – mcgrailm May 26 '11 at 12:34