Thuộc tính value của Select trong HTML DOM

Thuộc tính value của HTML DOM Select trả về và cho phép thay đổi nội dung thuộc tính value của một danh sách thả xuống.

Cú pháp

Cú pháp như sau:

• Lấy value:

object.value

• Thiết lập value:

object.value = true | false

Ví dụ

Dưới đây là ví dụ về thuộc tính value của HTML DOM Select:

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:8px;       outline:none;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       color:#db133a;       font-weight:bold;    } </style> </head> <body> <h1>Demo thuộc tính value của DOM Select</h1> <p>Chào bạn, hãy chọn môn học yêu thích:</p> <select class='drop-down' name="Drop Down List"> <option>Vật lý</option> <option>Toán học</option> <option>Hóa học</option> <option>Tiếng Anh</option> </select> <button type="button" onclick="getValue()" class="btn">Hiển thị giá trị</button> <div class="show"></div> <script>    function getValue() {       var dropDown = document.querySelector(".drop-down");       document.querySelector(".show").innerHTML = "Giá trị = " + dropDown.value;    } </script> </body> </html>

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

Chọn môn học của bạn & sau đó nhấn nút 「Hiển thị giá trị」 để hiển thị giá trị.