jQuery Mobile 표单 선택 메뉴

jQuery Mobile 선택 메뉴

iPhone의 선택 메뉴：

Android 장치의 선택 메뉴：

<select> 요소는 여러 항목을 포함한 드롭다운 메뉴를 생성합니다。

<select> 요소의 <option> 요소는 목록에서 사용할 수 있는 항목을 정의합니다：

예제

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">选择日期</label>
    <select name="day" id="day">
      <option value="mon">星期一</option>
      <option value="tue">星期二</option>
      <option value="wed">星期三</option>
    </select>
  </fieldset>
</form>

직접 시험해 보세요

안내:리스트에 장기적인 관련 항목이 포함되어 있다면 <select>에서 <optgroup> 요소를 사용하십시오：

예제

<select name="day" id="day">
   <optgroup label="Weekdays">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
   </optgroup>
   <optgroup label="Weekends">
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
   </optgroup>
</select>

직접 시험해 보세요

커스텀 선택 메뉴

이 페이지 상단의 이미지는 모바일 플랫폼에서 선택 메뉴를 표시하는 독특한 방법을 보여줍니다。

모든 모바일 장치에서 일관된 외관을 표시하려면 jQuery의 커스텀 선택 메뉴를 사용하고 data-native-menu="false" 속성을 사용하십시오：

예제

<select name="day" id="day" data-native-menu="false">

직접 시험해 보세요

여러 선택

선택 메뉴에서 여러 항목을 선택하려면 <select> 요소에서 multiple 속성을 사용하십시오：

예제

<select name="day" id="day" multiple data-native-menu="false">

직접 시험해 보세요

더 많은 예제

data-role="controlgroup" 사용
한 개나 여러 개의 선택 메뉴를 결합하는 방법.
data-type="horizontal" 사용
수평으로 선택 메뉴를 결합하는 방법.
미리 선택된 옵션
옵션을 미리 선택하는 방법.
접히는 양식
접히는 양식을 만드는 방법.