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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
js微信分享实现代码
Oct 11 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
微信小程序合法域名配置方法
May 06 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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基础知识:类与对象(5) static
2006/12/13 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python实现简易内存监控
2018/06/21 Python
python and or用法详解
2019/06/26 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
群胜软件Java笔试题
2012/09/29 面试题
应届生法律求职信
2013/10/22 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
小学班级口号大全
2015/12/25 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Elasticsearch 批量操作
2022/04/19 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技