<%@ 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 ); } 返回一个字符串 ...