select 下拉框選中事件

admin發表於2018-05-23
事件

切換select下拉選單的選中項觸發change事件，也就是下拉框選中事件。

於是可以利用此事件根據不需要執行相應的操作。

程式碼例項如下：

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

上述程式碼會將選中項的value值寫入div中，更多內容參閱如下幾篇文章。

相關閱讀：

（1）.change事件參閱JavaScript change 事件一章節。

（2）.innerHTML參閱JavaScript innerHTML一章節。

（3）.options參閱JavaScript select options 集合一章節。

（4）.selectedIndex參閱JavaScript selectedIndex一章節。

相關文章