วิธีระบุจำนวนตัวเลือกที่มองเห็นได้สำหรับ <select> ใน HTML

ใช้แอตทริบิวต์ size เพื่อกำหนดจำนวนตัวเลือกที่มองเห็นได้สำหรับองค์ประกอบ <select> ใน HTML

ตัวอย่าง

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

<!DOCTYPE html>
<html>
  <body>
    <p>Select the countries you have visited till now:</p>
    <select size="5">
      <option value="india">India</option>
      <option value="us">US</option>
      <option value="canada">Canada</option>
      <option value="aus">Australia</option>
      <option value="bangladesh">Bangladesh</option>
    </select>
  </body>
</html>

พฤติกรรมของ size

ตัวอย่าง: Multi-select List Box

<label for="countries">Visited Countries (Ctrl+Click to select multiple):</label>
<select id="countries" name="countries" size="6" multiple>
  <option value="th">Thailand</option>
  <option value="jp">Japan</option>
  <option value="kr">Korea</option>
  <option value="sg">Singapore</option>
  <option value="my">Malaysia</option>
  <option value="vn">Vietnam</option>
  <option value="id">Indonesia</option>
  <option value="ph">Philippines</option>
</select>

JavaScript: รับค่า Multiple Selection

<select id="skills" name="skills" size="5" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
  <option value="node">Node.js</option>
</select>

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

// รับค่าที่เลือกทั้งหมด
select.addEventListener('change', () => {
  const selected = Array.from(select.selectedOptions).map(opt => opt.value);
  console.log('Selected:', selected); // ['html', 'js', 'react']
});

// ตั้งค่าเลือกด้วยโปรแกรม
select.value = ['html', 'react']; // Array of values
// หรือ
Array.from(select.options).forEach(opt => {
  opt.selected = ['html', 'react'].includes(opt.value);
});
</script>

การจัดสไตล์ด้วย CSS

select[size] {
  min-height: 150px; /* fallback */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
  background: white;
}

select[size] option {
  padding: 8px 12px;
}

select[size] option:checked {
  background: #007bff;
  color: white;
}

select[size] option:hover {
  background: #e9ecef;
}

Optgroup ใน List Box

<select size="8" multiple>
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
    <option value="python">Python</option>
    <option value="go">Go</option>
  </optgroup>
</select>

หมายเหตุ: size กำหนดจำนวนแถวที่มองเห็น ความสูงจริงขึ้นอยู่กับ Font size และ Padding ของ Option ใช้ CSS height หรือ min-height เพื่อควบคุมได้แม่นยำกว่า