jQuery select下拉選單readonly只讀

antzone發表於2017-03-21
jQuery

select下拉選單並沒有readonly屬性，在預設狀態下是無法設定其只讀功能的，所以需要另闢蹊徑來模擬實現此功能，下面就通過程式碼例項介紹一下如何利用jquery模擬實現select下拉選單的readonly只讀功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var _index=$("#sel").get(0).selectedIndex;
  $("#sel").change(function(){
    $("#sel").get(0).selectedIndex=_index;
  })
})
</script>
</head>
<body>
<select id="sel">
  <option>螞蟻部落一</option>
  <option>螞蟻部落二</option>
  <option>螞蟻部落三</option>
  <option>螞蟻部落四</option>
  <option>螞蟻部落五</option>
</select>
</body>
</html>

程式碼實現了select下拉選單的只讀效果，下面介紹一下它的實現過程:

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var _index=$("#sel").get(0).selectedIndex，獲取當前select下拉選單的選中項的索引值。

（3）.$("#sel").change(function(){})，為select下拉選單註冊change事件處理函式。

（4）.$("#sel").get(0).selectedIndex=_index，將原來的選中項的索引值賦值給selectedIndex屬性，這樣就能保持選中項不變。

二.相關閱讀:

（1）.get方法參閱jQuery get()一章節。

（2）.selectedIndex屬性參閱javascript select.selectedIndex一章節。

（3）.change事件參閱jQuery change 事件一章節。

相關文章