利用jQuery操作select列表选项的上移下移示例

浏览数：45 / 时间：2015年06月09日

导读：本文实现了一个简单的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>