JavaScript動態設定select下拉選單預設選項

admin發表於2017-12-04
JavaScript

本章節介紹一下如何利用javascript設定select下拉選單的選中項。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript"> 
window.onload=function(){ 
  var osel=document.getElementById("sel"); 
  var opts=osel.getElementsByTagName("option");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    opts[3].selected=true;
  }
} 
</script> 
</head> 
<body> 
<select name="sel" id="sel"> 
<option value="0">螞蟻部落一</option> 
<option value="1">螞蟻部落二</option> 
<option value="2" selected>螞蟻部落三</option> 
<option value="3">螞蟻部落四</option>
<option value="4">螞蟻部落五</option>  
</select> 
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

點選按鈕可以設定select下拉選單的預設選中項。

相關文章