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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
js文字横向滚动特效
Nov 11 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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/07/12 PHP
php的计数器程序
2006/10/09 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
opencv实现图片模糊和锐化操作
2018/11/19 Python
python 实现绘制整齐的表格
2019/11/18 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
银行求职信个人范文
2013/12/16 职场文书
学生喝酒检讨书
2014/02/06 职场文书
大学自我评价
2014/02/12 职场文书
创意广告词
2014/03/17 职场文书
高中语文课后反思
2014/04/27 职场文书
市级文明单位申报材料
2014/05/07 职场文书
工会工作先进事迹
2014/08/18 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
老人节主持词
2015/07/04 职场文书
行为习惯主题班会
2015/08/14 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
MySQL Server 层四个日志
2022/03/31 MySQL
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python