HTML DOM选择值属性


HTML DOM Select value Property

HTML DOM选择值属性返回并修改下拉列表的value属性的内容。

句法

以下是语法-

1.返回值

1
object.value

2.修改价值

1
object.value = true | false

例

让我们看一个HTML DOM选择值属性的示例-

现场演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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>
DOM Select value property Demo
<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>


 function getValue() {
   var dropDown = document.querySelector(".drop-down");
   document.querySelector(".show").innerHTML ="<p>
   "+"Value =" + dropDown.value +"";
</p> }

</body>
</html>

输出量

这将产生以下输出-

选择您的主题，然后单击"显示值"按钮以显示值。