js如何獲取select下拉選單的預設選中項

admin發表於2017-03-23
JS

本章節介紹一下如何獲取select下拉選單的預設選中項的值，特別提醒一下，這裡要獲取的是預設選中項的值，而不是當前選中項的值，當然，預設選中項和當前選中項有可能是同一個。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function getDefaultSelectedOption(selectId) { 
  var dom,selectId=selectId.replace(/^#/,''),opts; 
  try{
    var osel=document.getElementById(selectId);
    opts=osel.getElementsByTagName('option'); 
    for(var i in opts){ 
      if(opts[i].defaultSelected){ 
        dom = opts[i];
        break; 
      } 
    } 
  } 
  catch(e){} 
  return dom; 
}
window.onload=function(){
  document.getElementById('btn').onclick=function(){ 
    alert((getDefaultSelectedOption('sel')).value); 
  }
}
</script> 
</head>
<body> 
<select id="sel"> 
  <option value="1">螞蟻部落一</option> 
  <option selected>螞蟻部落二</option> 
  <option value="3">螞蟻部落三</option> 
</select> 
<button id="btn">檢視效果</button> 
</body> 
</html>

以上程式碼實現了我們的要求，能夠獲取select下拉選單的預設選中項的值。

相關文章