<%@ 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. POJ3764,BZOJ1954 The xor-longest Path

    题意 In an edge-weighted tree, the xor-length of a path p is defined as the xor sum of the weights of ...

  2. hadoop之 Zookeeper 分布式应用程序协调服务

    (1) Zookeeper 在 Hadoop 集群中的作用 Zookeeper 是分布式管理协作框架,Zookeeper 集群用来保证 Hadoop 集群的高可用,(高可用的含义是:集群中就算有一部分 ...

  3. Java 编码规范

    package(包) 包名的命名规范:1.小写 2.至少有一层目录 3.域名倒置书写 package baidu; package com.baidu.www; Class(类)-----大驼峰法 类 ...

  4. 学习FPGA有必要写SDRAM控制器吗？

    在学习FPGA的过程中,注意是在学习过程中,联系FPGA的使用技巧,强烈建议尝试设计一个SDRAM控制器,不要使用IP核. 学习SDRAM控制器设计,能让你掌握很多知识. 更好的使用状态机去精准控制时 ...

  5. 6kzz整合ueditor

    用过6kzz免费版的朋友都知道,它的后台编辑器是kindeditor,并且是两三年前的版本,有很多功能都没有,现在的kindeditor也不错,但感觉还是没有百度的ueditor强大(据说微信后台的编 ...

  6. UnQLite简介

    UnQLite是,由Symisc Systems公司出品的一个嵌入式C语言软件库,它实现了一个自包含.无服务器.零配置.事务化的NoSQL数据库引擎.UnQLite是一个文档存储数据库,类似于Mong ...

  7. JavaScript笔记——DOM的操作

    节点及其类型 在JavaScript中,节点分为三种: 元素节点:HTML标签元素. 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在什么 ...

  8. 给安卓端调用的短信发送接口demo

    package com.js.ai.modules.pointwall.action; import java.io.IOException; import java.util.HashMap; im ...

  9. 密码生成工具Cupp

    Cupp可根据已知信息生成相应的字典,用来爆破很有帮助 首先先安装一下cupp 命令:apt-get install cupp 参数说明: -v查看cupp版本号 -h 查看参数列表 -l 从gith ...

  10. Access 数据库的数据类型

    今天开发数据库通用组件时,做C#数据库类型与Access数据库类型的相互转化时,发现Access中“text”类型的最大长度为255,当长度超过255时,需改用“Memo”类型,但需要注意备注(Mem ...