此為上課的筆記,用來往後複習時
Query Mobile的selectmenu應用
在撰寫程式取得選取項目
先練習selectmenu應用
<body>
<div data-role="page" id="Page1">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<div data-role="fieldcontain">
<label for="chooseCourse">選擇課程:</label>
<select name="chooseCourse"
id="chooseCourse"
data-iconpos="left"
data-native-menu="false">
<option value="J01" selected="selected">jQuery Mobile</option>
<option value="ph" data-placeholder="true">請選擇</option>
<option value="J02">jQuery</option>
<option value="J03">JavaScript</option>
<option value="A01">ASP.NET</option>
<option value="H01">HTML5</option>
<option value="L01">C#</option>
<option value="L02">Visual Basic</option>
</select>
</div>
<div id="result"></div>
</div>
<!-- /content -->
<div data-role="footer">
<h4>©Copyright 2015 </h4>
</div>
<!-- /footer -->
</div>
</body>
撰寫程式取得選取項目
<script>
$(function() {
$("#chooseCourse").change(function() {
var result =
"你選取了" +
$('#chooseCourse').val() +
"," +
$(":selected", this).text()
$('#result').text(result);
});
});
</script>
取得的畫面
