แท็ก <optgroup> ใน HTML

องค์ประกอบ <optgroup> ใน HTML ใช้สำหรับจัดกลุ่มตัวเลือกในรายการแบบเลื่อนลง (drop-down list) ตัวอย่างเช่น คุณอาจเคยเห็นรายการที่จัดกลุ่มไว้ เช่น หลักสูตรปริญญาตรีและปริญญาโทแสดงในกลุ่มต่างๆ ใน dropdown list เดียว

แอตทริบิวท์ต่อไปนี้:

disabled: ระบุว่ากลุ่มตัวเลือกควรถูกปิดใช้งาน
label: ระบุฉลาก (label) สำหรับกลุ่มตัวเลือก

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>คุณสมบัติการศึกษา</h2>
  <select>
    <optgroup label="ปริญญาตรี">
      <option value="bca">BCA</option>
      <option value="bcom">B.COM</option>
      <option value="btech">B.TECH</option>
    </optgroup>
    <optgroup label="ปริญญาโท">
      <option value="mca">MCA</option>
      <option value="mcom">M.COM</option>
      <option value="mtech">M.TECH</option>
      <option value="msc">M.Sc</option>
    </optgroup>
  </select>
</body>
</html>

ผลลัพธ์

แท็ก <optgroup> ใน HTML

ในตัวอย่างข้างต้น เรามี optgroup สองอันเพื่อตั้งค่า dropdown list พร้อมสองส่วน ด้วยวิธีนี้ เราจัดกลุ่มตัวเลือกในรายการแบบเลื่อนลง:

<select> <optgroup label="ปริญญาตรี"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="ปริญญาโท"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select>

องค์ประกอบ option ที่ตั้งค่าไว้ ใช้สำหรับตั้งค่าตัวเลือกต่างๆ สำหรับรายการแบบเลื่อนลง และอนุญาตให้ผู้ใช้เลือกอย่างใดอย่างหนึ่งจาก optgroup เดียว:

<option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option>