Jquery多选框互相内容交换的实例代码


Posted in Javascript onJuly 04, 2013
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 把选择项追加给对方
            $('#add').click(function(){
            var options=$('#select1 option:selected');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
            // 把所有项追加给对方
            $('#addAll').click(function(){
            var options=$('#select1 option');
            var remove=options.remove();
            remove.appendTo("#select2");
            });
            // 把选择项退回给对方
            $('#remove').click(function(){
            var options=$('#select2 option:selected');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
            // 把全部项退回给对方
            $('#removeAll').click(function(){
            var options=$('#select2 option');
            var remove=options.remove();
            remove.appendTo("#select1");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="left">
        <select multiple="multiple" id="select1" style="width:100px;height:160px">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        </select>
    </div>
    <div>
        <span id="add">选中项添加至右边>></span><br />
        <span id="addAll">全部添加到右边>></span>
    </div>
    <div id="right">
        <select multiple="multiple" id="select2" style="width:100px;height:160px"></select>
    </div>
    <div>
        <span id="remove"><<选中项还原至左边</span><br />
        <span id="removeAll"><<全部还原至左边</span>
    </div>
    </form>
</body>
Javascript 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
jquery插件之easing使用
Aug 19 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
js局部刷新页面时间具体实现
Jul 04 #Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 #Javascript
javascript闭包的高级使用方法实例
Jul 04 #Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 #Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 #Javascript
JS实现简单的Canvas画图实例
Jul 04 #Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
小班上学期幼儿评语
2014/12/30 职场文书
初中数学教学随笔
2015/08/15 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫