<%@ 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();

            $("#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>

jquery select 左右移动的更多相关文章

  1. jquery select取值，赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  2. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  3. jQuery select的操作代码

    jQuery對select的操作的实际应用代码. //改變時的事件  复制代码代码如下: $("#testSelect").change(function(){ //事件發生  j ...

  4. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  5. jQuery select的操作实现代码

          //改变时的事件  $("#testSelect").change(function(){ //事件发生生 jQuery('option:selected', this ...

  6. jquery select()方法 语法

    jquery select()方法 语法 作用:当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件.select() 方法触发 select 事件,或规定 ...

  7. 异步实时搜索jquery select插件

    异步实时搜索jquery select插件 一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不 ...

  8. jquery select操作大全

    添加option $("#ID option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }) ...

  9. jQuery Select 自动选择默认值

    ////// the Select target Auto Select value extension plugin // // ---------------------------------- ...

  10. jQuery Select的操作集合

    1. $("#select_id").change(function(){... });   //为select添加事件,当选择其中一项时触发2. $("#select_ ...

随机推荐

  1. 剑指offer-第六章面试中的各项能力（数组中只出现一次的数字）

    题目:输入一个数组,该数组中有两个只出现一次的数字,其他的数字都出现两次,输出出只出现一次的数字. 思路:首先,我们可以将这个数组分成两份,一份里面放一个只出现一次的数字.那么我们该怎么分呢?将整个数 ...

  2. 把UIImage保存到照片库和沙盒中

    1.保存到iOS照片库需要引入QuartzCore.framework框架,具体代码如下: .h文件 #import <QuartzCore/QuartzCore.h> UIImageVi ...

  3. 洛谷 P2920 [USACO08NOV]时间管理Time Management

    传送门 题目大意: 每个工作有截至时间和耗费时间,n个工作求最小开始时间. 题解: 贪心 从n-1安排,让结束时间尽量的晚. 注意:优先级 cout<<st<0?-1:st;  (X ...

  4. gulp 流处理

    包含的内容:     穿插流     流合并     流队列     流筛选 1. 穿插流 // passthrough stream 把流传递给其他的 // use gulp.src(glob,{p ...

  5. c&c++ datetime

    时间函数之间的关系 struct tm { int tm_sec; // 代表目前秒数,正常范围0-59,但允许至61秒: int tm_min; // 代表目前分数,范围为0-59. int tm_ ...

  6. spring新心得

    一直觉得spring是最厉害的框架,说说最近从依葫芦画瓢到现在慢慢摸索他的思想的过程 以前什么都不懂,在xml上抄网上的东西,到大概知道是什么运作的 三种配装方式 1,<spring实战> ...

  7. form表单中name和id区别

    HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链接等.HTML的结构包括头部(Head).主体(Body)两大部分,其中头部描述浏览器所需的信息,而主 ...

  8. 字符串（二）（PHP）

    1.大段文本在PHP中应该如果表示? 答: <?php $str = <<<aaa hello word; fjasdflj fjslad aaa;date_sub() aaa ...

  9. 要会的123个Python工具！

    本文中列举了123个Python渗透测试工具,当然不仅于渗透~ Network 调试和逆向工程 模糊测试 Web 取证 Volatility: 从 RAM 中提取数据 Rekall: Google 开 ...

  10. 1139 First Contact

    题意:给出n个人,m对朋友关系,其中带负号的表示女孩.然后给出k对查询a,b,要求找出所有a的同性别好友c,以及b的同性别好友d,且c和d又是好友关系.输出所有满足条件的c和d,按c的升序输出,若c编 ...