Thuộc tính value của HTML DOM Option trả về và cho phép thay đổi giá trị của một option sẽ được gửi lên server.
Cú pháp
Cú pháp như sau:
Lấy value:
object.value
Thiết lập label:
object.value = “văn bản"
Ví dụ
Dưới đây là ví dụ về thuộc tính value của HTML DOM Option:
<!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.2rem; } .drop-down{ width:35%; border:2px solid #fff; font-weight:bold; padding:8px; } .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; font-weight:bold; } </style> </head> <body> <h1>Demo DOM Option value</h1> <p>Chào bạn, hãy chọn môn học yêu thích:</p> <select class='drop-down'> <option value="Physics">Vật lý</option> <option value="Maths">Toán học</option> <option value="Chemistry">Hóa học</option> <option value="English">Tiếng Anh</option> </select> <button onclick="showValue()" class="btn">Hiển thị Giá trị</button> <div class="show"></div> <script> function showValue() { var dropDown = document.querySelector(".drop-down"); var msg = document.querySelector(".show").innerHTML="Giá trị được chọn là: " + dropDown.options[dropDown.selectedIndex].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 yêu thích của bạn từ danh sách thả xuống và sau đó nhấn nút 「Hiển thị Giá trị」 để hiển thị giá trị thuộc tính value của tùy chọn được chọn.
