jQuery Mobile: Basic drop down or select menu

This entry is part 66 of 73 in the series jQuery Mobile

This is the familiar drop down or select menu.  

This is the so called native drop down menu as constructing it is similar to constructing a web page drop down menu using Javascript.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Drop Down Menu App</h1>
    </div>

    <div data-role='content'>
        <form>
            <div class='ui-field-contain'>
                <select name='select-native-1' id='select-native-1'>
                    <option value='1'>The 1st Option</option>
                    <option value='2'>The 2nd Option</option>
                    <option value='3'>The 3rd Option</option>
                    <option value='4'>The 4th Option</option>
                </select>
            </div>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code
Series Navigation<< jQuery Mobile: Popup transitions
jQuery Mobile: Mini drop down menu >>