文章导航

JavaScript select value

2018-10-27 13:17| 作者: admin| 查看: 458| 评论: 0|来自: 蚂蚁部落

value是可读写属性,具有如下两个功能:

(1).返回select下拉列表的值,实质就是被选中option项的value属性值。

(2).设置select下拉列表的值,能够将具有此值的option项设置为选中状态。

语法结构:

[JavaScript] 纯文本查看 复制代码
select.value=value

参数解析:

(1).select:下拉列表对象。

(2).value:可选,要设置的值。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script> 
window.onload=function(){ 
  let oSelect=document.getElementById("st"); 
  let odiv=document.getElementById("ant");
  odiv.innerHTML=oSelect.value;
} 
</script> 
</head> 
<body> 
<select id="st" name="myselect"> 
  <option value="1">蚂蚁部落一</option> 
  <option value="2">蚂蚁部落二</option> 
  <option selected value="3">蚂蚁部落三</option> 
  <option value="4">蚂蚁部落四</option> 
</select> 
<div id="ant"></div>
</body> 
</html>

上述代码可以将select的value值写入div,分析如下:

(1).select的value值实质就是被选中option项的value值。

(2).第三个option项被选中,所以将数字3写入div。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script> 
window.onload=function(){ 
  let oSelect=document.getElementById("st"); 
  let odiv=document.getElementById("ant");
  oSelect.value=2;
} 
</script> 
</head> 
<body> 
<select id="st" name="myselect"> 
  <option value="1">蚂蚁部落一</option> 
  <option value="2">蚂蚁部落二</option> 
  <option selected value="3">蚂蚁部落三</option> 
  <option value="4">蚂蚁部落四</option> 
</select> 
</body> 
</html>

上述代码能够选中下拉列表第二项,分析如下:

(1).设置value属性值为2。

(2).由于第二个option项的value属性值为2,所以他会被选中。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部