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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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经典的给图片加水印程序
2006/12/06 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解Python中的条件判断语句
2015/05/14 Python
python实现合并两个数组的方法
2015/05/16 Python
Python yield 使用方法浅析
2017/05/20 Python
python编程线性回归代码示例
2017/12/07 Python
python实现人民币大写转换
2018/06/20 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python socket模块方法实现详解
2019/11/05 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python实现简单坦克大战
2020/03/27 Python
python爬取抖音视频的实例分析
2021/01/19 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
如何转换一个字符串到enum值
2014/04/12 面试题
应届毕业生求职信
2013/11/30 职场文书
关于美容院的活动方案
2014/08/14 职场文书
财务整改报告范文
2014/11/05 职场文书
安全保证书怎么写
2015/02/28 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
go类型转换及与C的类型转换方式
2021/05/05 Golang
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL