JavaScript select value

admin發表於2018-10-27
JavaScript

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，所以他會被選中。

相關文章