js獲取select選中項的值和文字內容

antzone發表於2017-03-20
JS

select下拉選單是最為常用的表單元素之一，下面就介紹一下如何使用js獲取被選中的項的value和text值。

先看一段完整的程式碼:

[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("thesel");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    alert(osel.value);    
  }
}
</script>
</head>
<body>
<select id="thesel">
  <option>螞蟻部落一</option>
  <option selected value=1>螞蟻部落二</option>
  <option>螞蟻部落三</option>
</select>
<input type="button" value="檢視效果" id="bt"/>
</body>
</html>

以上程式碼可以獲取選中項的value值，且相容性良好，再來看一段例項程式碼:

[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("thesel");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    alert(osel.options[osel.selectedIndex].value);
    alert(osel.options[osel.selectedIndex].text);
  }
}
</script>
</head>
<body>
<select id="thesel">
  <option>螞蟻部落一</option>
  <option selected value=1>螞蟻部落二</option>
  <option>螞蟻部落三</option>
</select>
<input type="button" value="檢視效果" id="bt"/>
</body>
</html>

以上程式碼也實現了我們的要求，並且具有良好的相容性，再來看一段程式碼例項:

[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("thesel"); 
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){ 
    for(i=0;i<osel.length;i++){
      if (osel[i].selected == true) {
        alert(osel[i].text);
        alert(osel[i].value);
      }
    }
  } 
} 
</script> 
</head> 
<body> 
<select id="thesel"> 
  <option>螞蟻部落一</option> 
  <option selected value=1>螞蟻部落二</option> 
  <option>螞蟻部落三</option> 
</select> 
<input type="button" value="檢視效果" id="bt"/> 
</body> 
</html>

以上程式碼實現了我們的要求，只不過是通過遍歷的方式來判斷每一項是否沒選中。

相關文章