Select Custom Menus
Description
As an alternative to the natively rendered options list, we may have our select menus rendered in a custom HTML/CSS view.
To create custom view, add a data-native-menu="false"
attribute to the select element.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!-- w w w . ja v a 2 s . c o m-->
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Custom Select</h1>
</div>
<div data-role="content">
<form id="test" id="test" action="#" method="post">
<br> <br>
<p>
<label for="genre">Genre:</label> <select name="genre" id="genre"
data-native-menu="false" data-theme="a">
<option value="null" data-placeholder="true">Select
one...</option>
<option value="action">Action</option>
<option value="comedy">Comedy</option>
<option value="drama">Drama</option>
<option value="romance">Romance</option>
</select>
</p>
<br> <br> <br> <br> <br>
<p>
<label for="delivery">Ticket Delivery:</label> <select
name="delivery" id="delivery" data-native-menu="false"
data-theme="d">
<option value="">Select one...</option>
<optgroup label="Digital">
<option value="barcode">E-Ticket</option>
<option value="nfc">NFC</option>
</optgroup>
<optgroup label="FedEx">
<option value="overnight">Overnight</option>
<option value="express">Express</option>
<option value="ground">Ground</option>
</optgroup>
<optgroup label="US Mail">
<option value="overnight">Overnight</option>
<option value="express">Express</option>
<option value="standard">Standard</option>
</optgroup>
</select>
</p>
</form>
</div>
</div>
</body>
</html>