ออบเจ็กต์ HTML DOM Select แทนองค์ประกอบ <select> ในเอกสาร HTML
ลองดูวิธีสร้างออบเจ็กต์ select
รูปแบบไวยากรณ์ (Syntax)
document.createElement(“SELECT”);
คุณสมบัติ (Properties)
คุณสมบัติของออบเจ็กต์ Select มีดังนี้:
| คุณสมบัติ | คำอธิบาย |
|---|---|
| autofocus | คืนค่าและเปลี่ยนแปลงว่ารายการแบบเลื่อนลงควรได้รับโฟกัสเมื่อโหลดหน้าหรือไม่ |
| disabled | คืนค่าและเปลี่ยนแปลงว่ารายการแบบเลื่อนลงถูกปิดใช้งานหรือไม่ |
| length | คืนค่าจำนวนองค์ประกอบ <option> ภายในรายการแบบเลื่อนลง |
| form | คืนค่าการอ้างอิงของฟอร์มที่มีรายการแบบเลื่อนลง |
| multiple | คืนค่าและเปลี่ยนแปลงว่าเลือกตัวเลือกได้หลายรายการหรือไม่ |
| name | คืนค่าและเปลี่ยนค่าของแอตทริบิวต์ name ของรายการแบบเลื่อนลง |
| size | คืนค่าและเปลี่ยนค่าของแอตทริบิวต์ size ของรายการแบบเลื่อนลง |
| type | คืนค่าของแอตทริบิวต์ type ของรายการแบบเลื่อนลง |
| value | คืนค่าและเปลี่ยนค่าของแอตทริบิวต์ value ของรายการแบบเลื่อนลง |
| selectedIndex | คืนค่าและเปลี่ยนดัชนีของตัวเลือกที่ถูกเลือกในรายการแบบเลื่อนลง |
เมธอด (Methods)
เมธอดของออบเจ็กต์ Select มีดังนี้:
| เมธอด | คำอธิบาย |
|---|---|
| add() | เพิ่มตัวเลือกใหม่เข้าไปในรายการแบบเลื่อนลง |
| remove() | ลบตัวเลือกออกจากรายการแบบเลื่อนลง |
| checkValidity() | ตรวจสอบความถูกต้องของรายการแบบเลื่อนลง |
ตัวอย่าง
ตัวอย่างการใช้งานออบเจ็กต์ HTML DOM Select:
<!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 Select Object</h1> <button onclick="createDropDownList()" class="btn">สร้างรายการแบบเลื่อนลง</button> <script> function createDropDownList() { var dropDown = document.createElement("SELECT"); dropDown.innerHTML="<option>เค้ก</option><option>พิซซ่า<option><option>เบอร์เกอร์</option>"; document.body.appendChild(dropDown); } </script> </body> </html>
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:
คลิกปุ่ม 「สร้างรายการแบบเลื่อนลง」 เพื่อสร้างรายการแบบเลื่อนลง
