首页 > 代码库 > 利用jQuery操作select列表选项的上移下移示例
利用jQuery操作select列表选项的上移下移示例
导读：本文实现了一个简单的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=http://www.mamicode.com/"../js/jquery-1.7.2.min.js"></script> 9 <script type="text/javascript" src=http://www.mamicode.com/"../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=http://www.mamicode.com/"01">AAA</option>56 <option value=http://www.mamicode.com/"02">BBB</option>57 <option value=http://www.mamicode.com/"03">CCC</option>58 <option value=http://www.mamicode.com/"04">DDD</option>59 <option value=http://www.mamicode.com/"05">EEE</option> 60 <option value=http://www.mamicode.com/"06">FFF</option>61 <option value=http://www.mamicode.com/"07">GGG</option>62 <option value=http://www.mamicode.com/"08">HHH</option>63 <option value=http://www.mamicode.com/"09">MMM</option>64 <option value=http://www.mamicode.com/"10">NNN</option>65 <option value=http://www.mamicode.com/"11">KKK</option>66 </select>67 按住Ctrl或shift支持多选68 <input type="button" value=http://www.mamicode.com/"moveUp" onclick="MoveUpOrDown(true)" />69 <input type="button" value=http://www.mamicode.com/"moveDown" onclick="MoveUpOrDown(false)" />70 </div>71 72 </form>73 </body>74 </html>
利用jQuery操作select列表选项的上移下移示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。