Question

I saw some beautiful select menus, apparently generated with JQuery with the following script:

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

When I tried the script, it simply produced default select menus without the JQuery custom styling. I suppose this makes sense, but how do I specify I want the above code to use the custom styling I found in the above link?

Note: I eventually want my software to go mobile, but I don’t think I’m actually using JQuery Mobile right now; I may have just imported the standard JQuery UI, which may or may not include the custom-styling for all I know. I’ve also looked at other related questions, but didn’t understand the answers.

Answer 1

You state that you are not including jQuery Mobile, that means no awesome-select-menus for you! You do not have to programmatically create the styled-select-menu, jQuery Mobile will do it automatically if you include the jQuery Mobile files.

Both the JS and CSS files for jQuery Mobile need to be included in your pages:

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

Source: http://jquerymobile.com/download/

Note that jQuery Mobile and jQuery UI are completely different libraries; although both of them require the jQuery Core.