JavaScript调整option顺序

快乐打工仔 分类:实例代码

JavaScript调整option顺序属于前端实例代码,有关更多实例代码大家可以查看

本章节介绍一下如何利用JavaScript调整select下拉菜单中option的顺序。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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等元素是一样的道理。

JavaScript调整option顺序,这样的场景在实际项目中还是用的比较多的,关于JavaScript调整option顺序就介绍到这了。

回复

我来回复
  • 暂无回复内容