更改select下拉選單項獲取對應的值和文字

admin發表於2017-03-18

在實際應用中，更改select下拉選單項就去執行一段程式碼有著大量的應用，例如更改下拉選單項實現頁面跳轉等，下面介紹一下如何更改select下拉選單項獲取當前選中的option項的value值和文字內容。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function selChange(){
  var sel=document.getElementById('sel');    
  alert(sel.options[sel.selectedIndex].text);
  alert(sel.options[sel.selectedIndex].value);
}
window.onload=function(){
  var sel=document.getElementById("sel");
  sel.onchange=selChange;
}
</script>
</head>
<body>
<select id="sel">
<option value="1">螞蟻部落一</option>
<option value="2">螞蟻部落二</option>
<option value="3">螞蟻部落三</option>
</select>
</body>
</html>

以上程式碼中，更改select下拉選單項能夠彈出當前選中項的value值和text文字值。

相關閱讀:

1.selectedIndex屬性可以參閱javascript select.selectedIndex一章節。 

2.onchange事件可以參閱javascript的select的onchange事件一章節。 

3.select相關操作可以參閱javascript動態操作select下拉選單一章節。

相關文章