<%@ 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. upper_bound函数，binary_check函数

    个人心得:二分的经典运用,刚开始就是upper_bound可能难以实现一点,还有就是要注意没找到的时候 lower_bound 返回大于等于key的第一个元素的下标.upper_bound 返回大于k ...

  2. java多线程:线程体往外抛出异常的处理机制实践

    1当线程的线程体内部无捕获异常,将异常抛出线程体外,不同情况下,程序处理机制 测试类 package com.ehking.bankchannel.domesticremit.facade.impl; ...

  3. linux 使用asciinema 进行命令行屏幕录制共享

    1. 安装 yum install asciinema 2. 使用 录制 asciinema rec filename(可选,方便进行后期的回放play) 同时生成一个url 地址方便传递 https ...

  4. Ambari的API调用

    GET api/v1/clusters/HDP/configurations可以获得所有的配置信息(例如,http://hdp0:8080/api/v1/clusters/HDP/configurat ...

  5. JMeter启动时显示Could not open/create prefs root node Software\JavaSoft\Prefs at root 0X80000002

    在windows 7上启动jmeter时,提示错误: Java.util.prefs.WindowsPreferences <init> WARNING: Could not open/c ...

  6. CentOS6安装vsftpd

    练习:完成vsftpd配置 (1) 禁锢系统用户于家目录 [root@node3 ~]# yum -y install vsftpd [root@node3 ~]# vim /etc/vsftpd/v ...

  7. oracle里的统计信息

    1 oracle里的统计信息 Oracle的统计信息是这样的一组数据,存储在数据字典,从多个维度描述了oracle数据库对象的详细信息,有6种类型 表的统计信息:记录数.表块的数量.平均行长度等 索引 ...

  8. MFC学习（五）常见面试题

    1:应用程序类 CTestOneApp::InitInstance 可以看做是MFC程序的入口函数,main函数隐藏在这个函数中.实际开发中一般不需要对这个类进行操作,但如果要在建立主对话框之前处理一 ...

  9. ACCESS中如何比较日期和时间,使用DateDiff函数

    DateDiff,语法如下:DateDiff( 间隔字符, 日期1, 日期2 [,firstdayofweek[, firstweekofyear]])一般使用 DateDiff( 间隔字符, 日期1 ...

  10. wordpress 学习笔记

    (1) __()函数 function __( $text, $domain = 'default' ) { return translate( $text, $domain ); } 返回一个字符串 ...