用jQuery实现<select>选项上下移动

最新推荐文章于 2020-10-29 10:38:23 发布

原创最新推荐文章于 2020-10-29 10:38:23 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #Ajax #.net #HTML #ViewUI

JS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用jQuery简化选项下拉菜单移动操作的方法，通过两个API的巧妙结合，使得用户能够轻松地上下移动已选中的选项，同时支持快捷键操作，极大地提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嘖嘖嘖，短短兩個API串接: $opt.next().after($opt)就做出了<option>向下移動的效果。記得以往用純Javascript寫，還得判斷是否為最後一個，若是就不能下移；然後上下位置交換得用options[index]搞半天。不得不要再次讚嘆jQuery的神奇!

<html>
<head>
<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type='text/javascript'>
$(function() {
$("#btnMoveUp,#btnMoveDown").click(function() {
  var $opt = $("#selList option:selected:first");
  if (!$opt.length) return;
  if (this.id == "btnMoveUp") $opt.prev().before($opt);
  else $opt.next().after($opt);
});
//按Alt加上下鍵也可以移動
$("#selList").keydown(function(evt) {
  if (!evt.altKey) return;
  var k = evt.which;
  if (k == 38) { $("#btnMoveUp").click(); return false; }
  else if (k == 40) { $("#btnMoveDown").click(); return false; }
});
});
</script>
</head><body>
<select id='selList' size='7' style='width: 100px'>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select><br />
<input type="button" value="▲" id="btnMoveUp" title="快速鍵: alt+向上" />
<input type="button" value="▼" id="btnMoveDown" title="快速鍵: alt+向下"/>
</body>
</html>

转载自: http://blog.darkthread.net/ 黑暗执行绪