วิธีระบุให้ตัวเลือกถูกเลือกล่วงหน้า (Pre-selected) ใน HTML

ใช้แอตทริบิวต์ selected เพื่อระบุว่าตัวเลือก (Option) ควรถูกเลือกล่วงหน้าเมื่อโหลดหน้าใน HTML

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ selected:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML selected attribute</title>
  </head>
  <body>
    <p>Here's the list of subjects. Select any one:</p>
    <form>
      <select name="dropdown">
        <option value="Computer Architecture" selected>Computer Architecture</option>
        <option value="Java">Java</option>
        <option value="Discrete Mathematics">Discrete Mathematics</option>
      </select>
    </form>
  </body>
</html>

การทำงานของ selected

• เป็น Boolean attribute - มีอยู่ = true, ไม่มี = false
• ใช้ได้กับ <option> ภายใน <select> เท่านั้น
• ถ้า <select> ไม่มี multiple - ใส่ selected ได้ เพียงหนึ่งตัว
• ถ้า <select multiple> - ใส่ selected ได้ หลายตัว

ตัวอย่าง: Multiple Pre-selected

<select name="skills" multiple size="5">
  <option value="html" selected>HTML</option>
  <option value="css" selected>CSS</option>
  <option value="js">JavaScript</option>
  <option value="react" selected>React</option>
  <option value="vue">Vue</option>
</select>

Default Selected vs Selected (JavaScript)

<select id="mySelect">
  <option value="1">One</option>
  <option value="2" selected>Two</option> <!-- defaultSelected = true -->
  <option value="3">Three</option>
</select>

<script>
const select = document.getElementById('mySelect');

// defaultSelected - ค่าเริ่มต้นจาก HTML (ไม่เปลี่ยน)
console.log(select.options[1].defaultSelected); // true
console.log(select.options[0].defaultSelected); // false

// selected - สถานะปัจจุบัน (เปลี่ยนได้)
console.log(select.options[1].selected); // true
select.value = '3';
console.log(select.options[1].selected); // false
console.log(select.options[2].selected); // true

// Reset ไปค่าเริ่มต้น
select.value = ''; // หรือ select.selectedIndex = -1
// หรือ loop reset defaultSelected

Optgroup กับ Selected

<select>
  <optgroup label="Frontend">
    <option value="react" selected>React</option>
    <option value="vue">Vue</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="python" selected>Python</option> <!-- Error: multiple selected in single select -->
  </optgroup>
</select>

เตือน: ใน Single select (multiple ไม่ได้ตั้ง) ใส่ selected ได้เพียง 1 ตัวในทั้ง Select (รวมทุก Optgroup)

CSS สำหรับ Selected Option

/* สไตล์ Option ที่ถูกเลือกใน Dropdown (จำกัดมาก) */
option:checked {
  background: #007bff;
  color: white;
}

/* สไตล์ใน Multi-select List Box */
select[multiple] option:checked {
  background: #007bff;
  color: white;
}

JavaScript: ตรวจจับการเปลี่ยนแปลง

<select id="mySelect" onchange="handleChange(this)">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
</select>

<script>
function handleChange(select) {
  console.log('Selected value:', select.value);
  console.log('Selected index:', select.selectedIndex);
  console.log('Selected text:', select.options[select.selectedIndex].text);
}
</script>