jQuery Mobile 表单选择菜单

Menu chọn jQuery Mobile

Menu chọn trên iPhone:

Menu chọn trên thiết bị Android:

Thẻ <select> tạo ra menu chọn thả xuống với nhiều tùy chọn.

Thẻ <option> trong thẻ <select> xác định các tùy chọn khả dụng trong danh sách:

thực thể

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">Chọn ngày</label>
    <select name="day" id="day">
      <option value="mon">Thứ hai</option>
      <option value="tue">Thứ hai</option>
      <option value="wed">Thứ ba</option>
    </select>
  </fieldset>
</form>

Thử ngay lập tức

Lưu ý:Nếu danh sách chứa một loạt các tùy chọn liên quan, hãy sử dụng thẻ <optgroup> trong thẻ <select>:

thực thể

<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>

Thử ngay lập tức

Menu chọn tùy chỉnh

Hình ảnh ở trên trang này hiển thị cách hiển thị menu chọn độc đáo trên các nền tảng di động.

Nếu bạn muốn hiển thị menu chọn với cùng một外观 trên tất cả các thiết bị di động, hãy sử dụng menu chọn tùy chỉnh của jQuery, thuộc tính data-native-menu="false":

thực thể

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

Thử ngay lập tức

Lựa chọn nhiều

Nếu bạn muốn chọn nhiều tùy chọn trong menu chọn, hãy sử dụng thuộc tính multiple trong thẻ <select>:

thực thể

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

Thử ngay lập tức

Các ví dụ thêm

Sử dụng data-role="controlgroup"
Làm thế nào để kết hợp một hoặc nhiều menu chọn.
Sử dụng data-type="horizontal"
Làm thế nào để kết hợp menu chọn theo hướng ngang.
Tùy chọn đã chọn trước
Làm thế nào để chọn trước một tùy chọn.
Biểu mẫu gấp
Làm thế nào để tạo biểu mẫu gấp.