Jquery下拉框 左右新增刪除移動
阿新 • • 發佈：2019-02-03
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="下拉框左右新增刪除.aspx.cs" Inherits="下拉框左右新增刪除" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div.centent { float: left; text-align: center; margin: 10px; } span { display: block; margin: 2px 2px; padding: 4px 10px; background: #898989; cursor: pointer; font-size: 12px; color: white; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //移到右邊 $("#add").click(function () { //獲取選中的選項，刪除並追加給對方 $("#select1 option:selected").appendTo("#select2"); }); //移到左邊 $("#remove").click(function () { $("#select2 option:selected").appendTo("select1"); }); //全部移到右邊 $("#add_all").click(function () { //獲取全部的選項,刪除並追加給對方 $("select1 option:selected").appendTo("select1"); }); $("#remove_all").click(function () { $("select2 option:selected").appendTo("select1"); }); //雙擊選項 $('#select1').dblclick(function () { //繫結雙擊事件 //獲取全部的選項,刪除並追加給對方 $("option:selected", this).appendTo('#select2'); //追加給對方 }); //雙擊選項 $('#select2').dblclick(function () { $("option:selected", this).appendTo('#select1'); }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="centent"> <select multiple="multiple" id="select1" style="width: 100px; height: 160px;"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> <option value="4">選項4</option> <option value="5">選項5</option> <option value="6">選項6</option> <option value="7">選項7</option> </select> <div> <span id="add">選中新增到右邊>></span> <span id="add_all">全部新增到右邊>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px; height: 160px;"> <option value="8">選項8</option> </select> <div> <span id="remove"><<選中刪除到左邊</span> <span id="remove_all"><<全部刪除到左邊</span> </div> </div> </form> </body> </html>