jQueryMobileでセレクトウィジェットの使い方

トップページJavascript CSS講座⇒jQueryMobileでセレクトウィジェットの使い方

jQueryMobileでセレクトウィジェットの使い方(select,optionタグ)



jQueryMobileでselect,optionタグを使うと、ウィンドウからはみ出す場合はダイアログでスクロール可能で選択、はみ出さない場合はポップアップウィンドウで選択になります。
また、複数選択のセレクトも可能です。

普通のセレクトウィジェット

<div data-role="fieldcontain">
	<label for="ssel0" class="select">OS選択</label>
	<select id="ssel0" name="ssel1" data-native-menu="false" >
		<option>選択してください</option>  <!-- 未選択時に表示される文字列 -->
		<optgroup label="以下から選択">
		<option value="Windows" selected>Windows</option>
		<option value="Mac OS X">Mac OS X</option>
		<option value="Linux">Linux</option>
		<option value="TRON">TRON</option>
		</optgroup>
	</select>
</div>
			

複数選択可能なセレクトウィジェット

<div data-role="fieldcontain">
	<label for="mybook">本の選択:</label>
	<select id="mybook" name="mybook" data-native-menu="false" multiple>
		<option>選択してください</option>  <!-- 未選択時に表示される文字列 -->
		<option value="html5_01">すごいよHTML5</option>
		<option value="html5_02">やったねHTML5</option>
		<option value="html5_03">やさしいHTML5</option>
	</select>
</div>