คุณสมบัติ type ของ HTML DOM Select

คุณสมบัติ type ของ HTML DOM Select ใช้คืนค่าของแอตทริบิวต์ type ของรายการแบบเลื่อนลงในเอกสาร HTML

รูปแบบไวยากรณ์ (Syntax)

object.type

ตัวอย่าง

ตัวอย่างการใช้งานคุณสมบัติ type ของ HTML DOM Select:

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{       display:block;       width:35%;       border:2px solid #fff;       background-color:transparent;       color:#fff;       font-weight:bold;       padding:8px;       margin:1rem auto;    }    .btn{       background:orange;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       font-weight:bold;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       font-weight:bold;    } </style> </head> <body> <h1>ตัวอย่างคุณสมบัติ DOM Select type</h1> <p>สวัสดีครับ โปรดเลือกวิชาที่คุณชอบ:</p> <select class='drop-down' name="Drop Down List"> <option>ฟิสิกส์</option> <option>คณิตศาสตร์</option> <option>เคมี</option> <option>ภาษาอังกฤษ</option> </select> <button type="button" onclick="getType()" class="btn">แสดง Type</button> <div class="show"></div> <script>    function getType() {       var dropDown = document.querySelector(".drop-down");       document.querySelector(".show").innerHTML="type = " + dropDown.type;    } </script> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:

คลิกปุ่ม 「แสดง Type」 เพื่อแสดงค่าของแอตทริบิวต์ type ของรายการแบบเลื่อนลง