วิธีตั้งค่าเริ่มต้น (Default Value) ให้แท็ก <select> ใน HTML

ใน HTML สร้าง dropdown list (รายการแบบเลื่อนลง) ได้ง่ายด้วยแท็ก <select> ร่วมกับ <option> สำหรับรายการตัวเลือก

เพื่อตั้งค่าเริ่มต้น (preselect) ให้เพิ่มแอตทริบิวต์ selected ในแท็ก <option> ของรายการที่ต้องการ

ตัวอย่าง

<!DOCTYPE html> <html>
  <head>
    <title>HTML Select Element</title>
  </head>
  <body>
    <p> Select any one:</p>
    <form>
      <select name="dropdown">
        <option value="Java">Java</option>
        <option value="Discrete Mathematics" selected>Discrete Mathematics</option>
        <option value="Chemistry">Chemistry</option>
      </select>
    </form>
  </body>
</html>

รายละเอียด

• selected เป็น boolean attribute ไม่ต้องใส่ค่า (แค่เขียน selected หรือ selected="selected")
• ถ้าไม่ใส่ selected เบราว์เซอร์จะเลือกตัวแรกเป็นค่าเริ่มต้น
• ใช้ disabled ใน option เพื่อปิดใช้งานตัวเลือกนั้น
• ใช้ <optgroup> จัดกลุ่มตัวเลือก

เข้าถึงค่าที่เลือกด้วย JavaScript

var select = document.querySelector('select[name="dropdown"]');
console.log(select.value); // ค่า value ของ option ที่เลือก