ออบเจ็กต์ HTML DOM Option แทนองค์ประกอบ <option> ในเอกสาร HTML
ลองดูวิธีสร้าง option object:
รูปแบบไวยากรณ์ (Syntax)
document.createElement(“OPTION”);
คุณสมบัติ (Properties)
คุณสมบัติของ option Object มีดังนี้:
| คุณสมบัติ | คำอธิบาย |
|---|---|
| disabled | คืนค่าและเปลี่ยนแปลงว่าองค์ประกอบ option ถูกปิดใช้งานหรือไม่ |
| defaultSelected | คืนค่าค่าเริ่มต้นขององค์ประกอบ option ในเอกสาร HTML |
| form | คืนค่าการอ้างอิงของฟอร์มที่มีองค์ประกอบ option ในเอกสาร HTML |
| index | คืนค่าและเปลี่ยนแปลงตำแหน่งดัชนีของ option ในเอกสาร HTML |
| label | คืนค่าและเปลี่ยนค่าของแอตทริบิวต์ label ของ option ในเอกสาร HTML |
| selected | คืนค่าและเปลี่ยนค่าของแอตทริบิวต์ selected ของ option |
| text | คืนค่าและเปลี่ยนข้อความของ option |
| value | คืนค่าและเปลี่ยนค่าของ option ที่จะส่งไปยังเซิร์ฟเวอร์ |
ตัวอย่าง
ตัวอย่างการใช้งานออบเจ็กต์ HTML DOM Option:
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; background-color:#fff; color:#0197F6; } h1{ color:#23CE6B; } .btn{ background-color:#fff; border:1.5px dashed #0197F6; height:2rem; border-radius:2px; width:60%; margin:2rem auto; display:block; color:#0197F6; outline:none; cursor:pointer; } </style> </head> <body> <h1>ตัวอย่าง DOM option Object</h1> <select class="drop-down"></select> <button onclick="createDropDownList()" class="btn">สร้างตัวเลือกแบบเลื่อนลง</button> <script> function createDropDownList() { var option = document.createElement("option"); option.setAttribute("value","Hello"); option.innerText='Hello'; document.querySelector(".drop-down").appendChild(option); } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:
คลิกปุ่ม 「สร้างตัวเลือกแบบเลื่อนลง」 เพื่อสร้าง option object และเพิ่มเข้าไปในรายการแบบเลื่อนลง
