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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
原生js+css实现tab切换功能
Sep 17 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
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python框架django基础指南
2016/09/08 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
金智子午JAVA面试题
2015/09/04 面试题
Android面试题附答案
2014/12/08 面试题
办公室文秘自我评价
2013/09/21 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
小学生学习感言
2014/03/10 职场文书
大学生社团活动总结
2014/04/26 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
超市采购员岗位职责
2015/04/07 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
小学少先队活动总结
2015/05/08 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL