Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách chọn trước (preselect) Dropdown bằng JavaScript theo chương trình?

Để chọn trước mục trong dropdown (<select>) bằng JavaScript, dùng thuộc tính selectedIndex (chỉ số từ 0) hoặc gán trực tiếp .value.

Ví dụ: Dùng selectedIndex

<!DOCTYPE html>
<html>
<head>
    <title>HTML select tag</title>
</head>
<body>
    <p>Chọn một mục:</p>
    <form>
        <select id="dropdown" name="dropdown" class="form-control">
            <option value="Android">Android</option>
            <option value="CSS">CSS</option>
            <option value="Python">Python</option>
        </select>
    </form>
    <script>
        // Chọn mục index 1 (CSS - mục thứ 2)
        document.getElementById("dropdown").selectedIndex = "1";
    </script>
</body>
</html>

Cách hiện đại hơn: Gán theo value

<script>
    const select = document.getElementById("dropdown");
    select.value = "Python"; // Chọn option có value="Python"
</script>

So sánh:

CáchƯu điểmNhược điểm
selectedIndexĐơn giản, không cần biết valuePhụ thuộc thứ tự, dễ sai khi thêm/xóa option
.valueRõ ràng, bền vững, không quan tâm thứ tựCần biết value chính xác

Lưu ý:

  • Nếu <select multiple>, dùng selectedOptions hoặc set option.selected = true cho từng option.
  • Trigger event change nếu cần: select.dispatchEvent(new Event('change')).