jqm表单元素之select
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="GBK" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>jQuery Mobile Docs - select</title> 7 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> 8 <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> 9 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 10 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 11 <script type="text/javascript" src="../docs/docs.js"></script> 12 <!--更多select 参考官网http://jquerymobile.com/test/docs/forms/selects/index.html --> 13 <script> 14 $(function(){ 15 $("#close").click(function(){ 16 $('select').selectmenu('close'); 17 }); 18 $("#open").click(function(){ 19 $('select').selectmenu('open'); 20 }); 21 22 $("#change").click(function(){ 23 $('#select-choice-1').val('rush');//改变了下拉框默认选中的值 24 }); 25 26 $("#refresh").click(function(){ 27 $('select').selectmenu('refresh');//强制刷新界面上才可以看的到 28 }); 29 30 31 }); 32 </script> 33 </head> 34 <body> 35 36 <div data-role="page"> 37 38 <div data-role="header" data-theme="b"> 39 <h1>选择菜单</h1> 40 <a href="http://www.cnblogs.com/" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a> 41 </div><!-- /header --> 42 43 <div data-role="content"> 44 <div data-role="fieldcontain"> 45 <label for="select-choice-1" class="select">Choose shipping method:</label> 46 <select name="select-choice-1" id="select-choice-1"> 47 <option value="standard">Standard: 7 day</option> 48 <option value="rush">Rush: 3 days</option> 49 <option value="express">Express: next day</option> 50 <option value="overnight">Overnight</option> 51 </select> 52 </div> 53 54 <div data-role="fieldcontain"> 55 <label for="select-choice-9" class="select">Choose shipping method(s):</label> 56 <select name="select-choice-9" id="select-choice-9" multiple="multiple"> 57 <option>Choose options</option> 58 <optgroup label="USPS"> 59 <option value="standard">Standard: 7 day</option> 60 <option value="rush">Rush: 3 days</option> 61 <option value="express">Express: next day</option> 62 <option value="overnight">Overnight</option> 63 </optgroup> 64 <optgroup label="FedEx"> 65 <option value="firstOvernight">First Overnight</option> 66 <option value="expressSaver">Express Saver</option> 67 <option value="ground">Ground</option> 68 </optgroup> 69 </select> 70 </div> 71 </div> 72 73 <div data-role="footer" data-position="fixed" class="dialogClose" data-theme="b"> 74 <div data-inline="true" align="center"> 75 <a href="#" data-role="button" data-ajax="false" id="close" data-theme="b">关闭select</a> 76 <a href="#" data-role="button" data-ajax="false" id="open" data-theme="b">打开select</a> 77 <a href="#" data-role="button" data-ajax="false" id="change" data-theme="b">改变select</a> 78 <a href="#" data-role="button" data-ajax="false" id="refresh" data-theme="b">刷新select</a> 79 80 </div> 81 82 83 </div> 84 85 86 </div> 87 </body> 88 </html>
通过event可以动态改变select事件
$( ".selector" ).selectmenu({ create: function(event, ui) { ... }//创建select的时候出发 }); $(".mySelect").bind( "change", function(event, ui) { //原生的javascript方法都可以绑定 ... });
当然要想改变select的默认配置,可以通过option事件来处理，比如主题，排版等等
了解更多参考官网http://jquerymobile.com/test/docs/forms/selects/options.html
