导读：本文实现了一个简单的select列表选项的上移下移操作，可帮助读者了解jQuery选择器，节点操作的一些常用方法
实现的效果：
分享代码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MoveNode_Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title>移动节点</title> 8 <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 9 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script> 10 <script type="text/javascript"> 11 12 //上移下移功能的实现 13 function MoveUpOrDown(UpOrDown) { 14 15 //查出select中有多少个可选节点 16 var selecteOptionLength = $("#where option").length; 17 18 //上移节点 19 if (UpOrDown) { 20 for (var i = 0; i < selecteOptionLength; i++) { 21 if ($("#where option:eq(" + i + ")").is(":selected")) { 22 23 if (i == 0) { 24 alert("你选择的节点在最前面无法移动！"); 25 break; 26 } 27 $("#where option:eq(" + i + ")").insertBefore($("#where option:eq(" + i + ")").prev("option")); 28 } 29 } 30 } 31 32 //下移节点 33 else { 34 for (var i = selecteOptionLength - 1; i >= 0; i--) { 35 if ($("#where option:eq(" + i + ")").is(":selected")) { 36 //判断是否选中最后一个节点 37 if (i == selecteOptionLength - 1) { 38 alert("你选择的节点在最后面无法移动！"); 39 break; 40 } 41 //执行插入节点操作 42 $("#where option:eq(" + i + ")").insertAfter($("#where option:eq(" + i + ")").next("option")); 43 44 } 45 } 46 } 47 48 } 49 </script> 50 </head> 51 <body> 52 <form id="form1" runat="server"> 53 <div> 54 <select multiple="multiple" id="where" size="16" name="where"> 55 <option value="01">AAA</option> 56 <option value="02">BBB</option> 57 <option value="03">CCC</option> 58 <option value="04">DDD</option> 59 <option value="05">EEE</option> 60 <option value="06">FFF</option> 61 <option value="07">GGG</option> 62 <option value="08">HHH</option> 63 <option value="09">MMM</option> 64 <option value="10">NNN</option> 65 <option value="11">KKK</option> 66 </select> 67 按住Ctrl或shift支持多选 68 <input type="button" value="moveUp" onclick="MoveUpOrDown(true)" /> 69 <input type="button" value="moveDown" onclick="MoveUpOrDown(false)" /> 70 </div> 71 72 </form> 73 </body> 74 </html>
原文：http://www.cnblogs.com/ManBlog/p/4005199.html