Thuộc tính giá trị tùy chọn HTML DOM trả về và sửa đổi giá trị của một tùy chọn sẽ được gửi qua máy chủ.
Cú pháp
Sau đây là cú pháp -
-
Trả lại giá trị
object.value
-
Đang sửa đổi nhãn
object.value = “text”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính giá trị tùy chọn HTML DOM -
<!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>DOM Option value Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option value="Physics">Physics</option>
<option value="Maths">Maths</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
<button onclick="showValue()" class="btn">Show Value</button>
<div class="show"></div>
<script>
function showValue() {
var dropDown = document.querySelector(".drop-down");
var msg = document.querySelector(".show").innerHTML="The selected value is: " + dropDown.options[dropDown.selectedIndex].value;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Chọn chủ đề yêu thích của bạn từ danh sách thả xuống và sau đó nhấp vào “ Hiển thị giá trị ”Để hiển thị giá trị của thuộc tính giá trị của tùy chọn đã chọn.
