選中select下拉選單第一項不觸發事件

antzone發表於2017-04-17
事件

select下拉選單第一項通常是提示內容所以選中的時候不希望選中第一項觸發事件。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var odiv = document.getElementById("show");
  var osel = document.getElementById("sel");
  osel.onchange = function () {
    if (this.value == 0) {
      return;
    } else {
      odiv.innerHTML = this.value;
    }
  }
}
</script>
</head>
<body>
<div id="show"></div>
<select id="sel">
  <option value="0">-請選擇-</option> 
  <option value="1">css教程</option> 
  <option value="2">div教程</option> 
  <option value="3">js教程</option> 
  <option value="4">正規表示式教程</option> 
</select>
</body>
</html>

上面的程式碼模擬實現我們的要求，選中第一個選項並不會有觸發事件的感覺。

其實事件並不是沒有觸發，只是當選中第一個選項的時候，事件處理函式直接return返回。

相關閱讀:

（1）.document.getElementById()可以參閱document.getElementById()一章節。

（2）.onchange事件可以參閱js change事件一章節。

（3）.innerHTML可以參閱innerHTML一章節。

相關文章