jQuery Mobile ฟอร์มเลือกเล่ม

เมนูที่เลือก jQuery Mobile

เมนูที่เลือกบน iPhone:

เมนูที่เลือกบนอุปกรณ์ Android:

องค์ประกอบ <select> สร้างเมนูลงหลังประกายของที่มีหลายตัวเลือก

องค์ประกอบ <option> ในองค์ประกอบ <select> กำหนดตัวเลือกที่สามารถใช้ในรายการ

ตัวอย่าง

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

ทดลองด้วยตัวเอง

คำเตือน：ถ้ารายการรวมหลายตัวที่เกี่ยวข้องกัน ใช้องค์ประกอบ <optgroup> ใน <select> :

ตัวอย่าง

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

ทดลองด้วยตัวเอง

การเลือกหลายตัว

ถ้าต้องการเลือกหลายตัวในเมนูที่ต้องเลือกหลายตัว โปรดใช้คุณสมบัติ multiple ในองค์ประกอบ <select> :

ตัวอย่าง

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

ทดลองด้วยตัวเอง

ตัวอย่างเพิ่มเติม

ใช้ data-role="controlgroup"
แบบฝึกที่จะรวมตัวเลือกเลื่อนหนึ่งหรือหลายตัว
ใช้ data-type="horizontal"
แบบฝึกที่จะรวมตัวเลือกเลื่อนที่มีขนาดน้ำตาลระดับน้ำทะเล
ตัวเลือกที่มีการเลือกล่วงหน้า
แบบฝึกที่จะเลือกตัวเลือกที่มีการเลือกล่วงหน้า
ฟอร์มที่คุมเปลี่ยนแปลง
แบบฝึกที่จะสร้างฟอร์มที่คุมเปลี่ยนแปลง