zoukankan      html  css  js  c++  java
  • jquery select 左右移动

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication9.WebForm1" %>
    
    <!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>
        <link href="jquery.ui.all.css" rel="stylesheet" />
        <link href="jquery.ui.theme.css" rel="stylesheet" />
        <link href="jquery-ui.css" rel="stylesheet" />
        <link href="ui.jqgrid1.css" rel="stylesheet" />
        <script src="Scripts/jquery-1.8.1.min.js"></script>
        <script src="Scripts/jquery.jqGrid.min.js"></script>
        <script type="text/javascript">
            function moveToRight(select1, select2)//把选中的移动到右边 sleect1和sleect2分别是下拉列表框的ID
            {
                alert(1);
                $("#mask").show();
                $('#' + select1 + ' option:selected').each(function () {
                    $("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select2 + "");
                    $(this).remove();
                });
                $("#mask").hide();
            }
            function moveAllToRight(select1, select2)//把所有的移动到右边
            {
                $('#' + select1 + ' option').each(function () {
                    $("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select2 + "");
                    $(this).remove();
                });
            }
            function moveToLeft(select1, select2)//把选中的移动到左边
            {
                $('#' + select2 + ' option:selected').each(function () {
                    $("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select1 + "");
                    $(this).remove();
                });
            }
            function moveAllToLeft(select1, select2)//把所有的移动到左边
            {
                $('#' + select2 + ' option').each(function () {
                    $("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo("#" + select1 + "");
                    $(this).remove();
                });
            }
    
            $.fn.GetPostData = function () {
                alert("ssss");
            }
    
            $(function () {
               
                $("#btn").on("click", function () {
                    $("#tabs").GetPostData();
                })
               
                $('#sel2').bind('dblclick', function (event) {//给下拉框绑定双击事件
                    moveToRight('sel2', 'sel3');
        
                });
                $('#sel3').bind('dblclick', function () {
                    moveToLeft('sel2', 'sel3');
                });
            });
    
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
               <%-- 自定义遮罩--%>
            <div class="window-mask" id="mask" style=" 100%; height:1000px; display: none; z-index: 9000;background-color:red;"></div>
            <select id="sel2" multiple="multiple" style=" 100px;">
                <option selected="selected">1.1</option>
                <option>1.2</option>
                <option>1.3</option>
            </select>
            <select id="sel3" multiple="multiple" style=" 100px;"></select>
    
        </form>
    </body>
    </html>
  • 相关阅读:
    MVC @Url.Action 小示例
    Eclipse快捷键
    MVC视频下载/文件上传
    MySQL数据库备份/导出
    C#文件下载
    C#正则表达式匹配字符串中的数字
    常用的LINQ to SQL 用法
    C# 实现抓取网页内容(一)
    C# 繁体字和简体字之间的相互转换
    我到底会什么??
  • 原文地址:https://www.cnblogs.com/kexb/p/5173181.html
Copyright © 2011-2022 走看看