JavaScript調整option順序

antzone發表於2018-01-23
JavaScript

本章節介紹一下如何利用JavaScript調整select下拉選單中option的順序。

程式碼例項如下:

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

以上程式碼中，點選按鈕可以調整option元素的順序，原理非常的簡單，就是利用insertBefore()函式挪動元素的位置即可，因為option元素就是普通的dom元素，沒有特別之處，和操作div等元素是一樣的道理。

相關文章