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