跳到主要內容

Listbox To ListBox (jQuery)

標籤：
<%@ Page Language="C#" AutoEventWireup="true"  EnableEventValidation="false" CodeBehind="ListBoxJq.aspx.cs" Inherits="VS2013Test.RightMgm.ListBoxJq" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
   
    <script>
        $(document).ready(function () {
            $('#btnRight').click(function (e) {
                var selectedOpts = $('#lstBox1 option:selected');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
                $('#lstBox2').append($(selectedOpts).clone());
                $(selectedOpts).remove();
                e.preventDefault();
            });
            $('#btnLeft').click(function (e) {
                var selectedOpts = $('#lstBox2 option:selected');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
                $('#lstBox1').append($(selectedOpts).clone());
                $(selectedOpts).remove();
                e.preventDefault();
            });

            $('#btnRightAll').click(function (e) {
                var selectedOpts = $('#lstBox1 option');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
                $('#lstBox2').append($(selectedOpts).clone());
                $(selectedOpts).remove();
                e.preventDefault();
            });

            $('#btnLeftAll').click(function (e) {
                var selectedOpts = $('#lstBox2 option');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
                $('#lstBox1').append($(selectedOpts).clone());
                $(selectedOpts).remove();
                e.preventDefault();
            });

            $('#Button1').click(function (e) {
                var selectedOpts = $('#lstBox2 option');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
                var x = "";
                $(selectedOpts).each(function (i) {
                    if ($(this).val().replace(' ','') != '') {
                        x += $(this).val() + "/";                      
                    }
                });
                $('#TextBox1').val(x);
                });
             
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
 
      
<table style='width:370px;'>
    <tr>
        <td style='width:160px;'>
            <b>Group 1:</b><br/>
           <select multiple="true" id='lstBox1' style="width:200px" runat="server">                       
        </select>
    </td>
    <td style='width:50px;text-align:center;vertical-align:middle;'>
        <input type='button' id='btnRight' value ='  >  '/>
        <br/><input type='button' id='btnLeft' value ='  <  '/>
        <br/><input type='button' id='btnRightAll' value ='  >>  '/>
        <br/><input type='button' id='btnLeftAll' value ='  <<  '/>
    </td>
    <td style='width:160px;'>
        <b>Group 2: </b><br/>
        <select multiple="true" id='lstBox2' style="width:200px" runat="server">               
        </select>
    </td>
</tr>
</table>
      
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="GetValue" />      
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
</body>
</html>

-------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace VS2013Test.RightMgm
{
    public partial class ListBoxJq : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                lstBox1.Items.Add(new ListItem("Asp.Net", "Asp.Net"));
                lstBox1.Items.Add(new ListItem("C#.Net", "C#.Net"));
                lstBox1.Items.Add(new ListItem("VB.Net", "VB.Net"));
                lstBox2.Items.Add(new ListItem("SQLServer", "SQLServer"));
                lstBox2.Items.Add(new ListItem("Oracle", "Oracle"));
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + TextBox1.Text + "');", true);
        }

       
    }
}