Jquery多选框互相内容交换
来源:互联网 发布:学粤语软件 编辑:程序博客网 时间:2024/05/18 02:46
<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>
0 0
- Jquery多选框互相内容交换
- Jquery多选框互相内容交换
- 互相交换博客连接
- 交换内容
- 使用jquery交换两行内容(实现行移动)
- jQuery_review之jQuery实现左右多选内容交换
- jQuery实现select下拉框左右选择_交换内容
- 5.6-奇偶位互相交换
- 拖动交换单元格内容
- 移动、交换SELECT内容
- 拖动交换单元格内容
- 交换两个字符串内容
- 交换数组内容
- jQuery插件实现select下拉框左右选择_交换内容
- 通过RuntimeStore让应用程序互相交换数据
- Java 两个变量的值互相交换
- 使用函数将两个数互相交换
- jquery moblie 交换
- adb出现adb server is out of date时的解决办法
- Highcharts使用指南
- windows7下object-c编译环境的搭建
- 《Cocos2d-x游戏开发之旅》读书笔记2:学习创建游戏项目
- ubunt14.04 jd-gui
- Jquery多选框互相内容交换
- DP 简单题 之 poj 1163
- android手机reboot流程分析
- JavaScript中Web应用程序事件处理
- 栈实现行编辑器
- 字符串循环右移
- hibernate 批量保存数据
- HDU1231 最大连续子序列(动态规划)
- Linux分区