พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน optgroup Tag

<optgroup> เป็นแท็กใน HTML5 ที่ใช้เพื่อจัดกลุ่มตัวเลือกภายใน <select> ให้เป็นกลุ่มๆ เพื่อให้การเลือกตัวเลือกเป็นระเบียบและเข้าใจง่ายขึ้น โดยทั่วไปแล้วจะใช้ในกรณีที่ต้องการจัดกลุ่มข้อมูลที่มีความสัมพันธ์กัน เช่น เมนูเลือกประเทศ เมนูเลือกหมวดหมู่ เป็นต้น

การใช้งาน <optgroup> เบื้องต้น

แท็ก <optgroup> จะต้องอยู่ภายใน <select> และแต่ละ <optgroup> จะประกอบด้วย <option> ที่เป็นตัวเลือกจริงๆ ของเรา โดยมีแอตทริบิวต์ label เพื่อระบุชื่อกลุ่ม

HTML
<label for="fruits">เลือกผลไม้ที่ชอบ:</label>
<select id="fruits" name="fruits">
  <optgroup label="ผลไม้เขตร้อน">
    <option value="mango">มะม่วง</option>
    <option value="pineapple">สับปะรด</option>
  </optgroup>
  <optgroup label="ผลไม้เขตหนาว">
    <option value="apple">แอปเปิล</option>
    <option value="cherry">เชอร์รี่</option>
  </optgroup>
</select>

ในตัวอย่างข้างต้น ตัวเลือกของเราจะแบ่งออกเป็น 2 กลุ่ม: “ผลไม้เขตร้อน” และ “ผลไม้เขตหนาว” โดยที่ผู้ใช้งานสามารถเลือกจากผลไม้ในแต่ละกลุ่มได้

การใช้งานแอตทริบิวต์ disabled

เราสามารถใช้แอตทริบิวต์ disabled กับ <optgroup> เพื่อปิดใช้งานทั้งกลุ่มตัวเลือกได้ หากไม่ต้องการให้ผู้ใช้เลือกจากกลุ่มนั้น

HTML
<label for="cars">เลือกยี่ห้อรถยนต์:</label>
<select id="cars" name="cars">
  <optgroup label="ญี่ปุ่น">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
  <optgroup label="ยุโรป" disabled>
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes-Benz</option>
  </optgroup>
</select>

ในตัวอย่างนี้ กลุ่ม “ยุโรป” ถูกปิดการใช้งาน (disabled) ทำให้ผู้ใช้งานไม่สามารถเลือกยี่ห้อรถ BMW หรือ Mercedes-Benz ได้

การใช้ JavaScript ควบคุม <optgroup>

เราสามารถใช้ JavaScript เพื่อควบคุมการแสดงผลหรือการทำงานของ <optgroup> ได้ เช่น การเพิ่มหรือลบตัวเลือก หรือการเปิดปิดการใช้งานแบบไดนามิก

ตัวอย่างการเปิด/ปิดการใช้งาน <optgroup> ด้วย JavaScript
HTML
<label for="cities">เลือกเมือง:</label>
<select id="cities" name="cities">
  <optgroup label="ในประเทศ" id="local">
    <option value="bangkok">กรุงเทพฯ</option>
    <option value="chiangmai">เชียงใหม่</option>
  </optgroup>
  <optgroup label="ต่างประเทศ" id="foreign">
    <option value="newyork">นิวยอร์ก</option>
    <option value="paris">ปารีส</option>
  </optgroup>
</select>

<button onclick="toggleForeign()">เปิด/ปิดตัวเลือกต่างประเทศ</button>

<script>
function toggleForeign() {
  const foreignOptgroup = document.getElementById('foreign');
  foreignOptgroup.disabled = !foreignOptgroup.disabled;
}
</script>

ในตัวอย่างนี้ เมื่อผู้ใช้กดปุ่ม ตัวเลือกในกลุ่ม “ต่างประเทศ” จะถูกเปิดหรือปิดการใช้งานตามการกดปุ่ม

การจัดกลุ่มซ้อนกัน

แม้ว่ามาตรฐาน HTML5 ไม่ได้รองรับการซ้อนกลุ่ม (<optgroup> ภายใน <optgroup>) แต่บางเบราว์เซอร์อาจจะรองรับในระดับหนึ่ง อย่างไรก็ตาม ควรหลีกเลี่ยงการใช้โครงสร้างซ้อนซับมากเกินไปในกรณีนี้ เพื่อให้แน่ใจว่าการใช้งานเป็นไปตามมาตรฐานและสามารถทำงานได้บนทุกเบราว์เซอร์

สรุป

การใช้งาน <optgroup> มีประโยชน์ในการจัดการตัวเลือกในแบบฟอร์มให้เป็นระเบียบ ทำให้ผู้ใช้งานสามารถเลือกข้อมูลได้ง่ายและสะดวกมากขึ้น

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ