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

燮羽天翔 · 发表于 2013-2-7 21:19:32

嘖嘖嘖，短短兩個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/ 黑暗执行绪

		自动登录	找回密码
密码			立即注册

用jQuery实现&lt;select&gt;选项上下移动

浏览过的版块

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