วิธีเลือกค่าเริ่มต้นใน Dropdown List (Preselect Option) ใน HTML

ใช้ attribute selected ใน <option> ที่ต้องการให้เลือกไว้ตั้งแต่แรก

รูปแบบ

<select name="language">
  <option value="java">Java</option>
  <option value="python" selected>Python</option>
  <option value="js">JavaScript</option>
</select>

ตัวอย่างเต็ม

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

Attribute ของ <select>

Attribute ของ <option>

Optgroup - จัดกลุ่มตัวเลือก

<select name="framework">
  <optgroup label="Frontend">
    <option value="react">React</option>
    <option value="vue" selected>Vue</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="django">Django</option>
  </optgroup>
</select>

Accessibility

• ใช้ <label for="select-id"> ผูกกับ select
• <option value="" disabled selected hidden>Select...</option> สำหรับ placeholder