jquery select 左右移动

最新推荐文章于 2020-10-24 18:16:50 发布

weixin_33736649

最新推荐文章于 2020-10-24 18:16:50 发布

阅读量79

点赞数

文章标签： ui c# xhtml

原文链接：http://www.cnblogs.com/kexb/p/5173181.html

版权

<%@ 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="width: 100%; height:1000px; display: none; z-index: 9000;background-color:red;"></div>
        <select id="sel2" multiple="multiple" style="width: 100px;">
            <option selected="selected">1.1</option>
            <option>1.2</option>
            <option>1.3</option>
        </select>
        <select id="sel3" multiple="multiple" style="width: 100px;"></select>

    </form>
</body>
</html>

转载于:https://www.cnblogs.com/kexb/p/5173181.html

weixin_33736649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery select 左右移动

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication9.WebForm1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫