jQuery两个列表中元素相互交换Demo
2016-08-17 15:14
302 查看
效果如图:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../js/jquery-1.4.2.js"></script> <style type="text/css"> <!-- BODY { font-family:"Courier"; font-size: 12px; margin:0px 0px 0px 0px; overflow-x:no; overflow-y:no; background-color: #B8D3F4; } td { font-size:12px; } .default_input { border:1px solid #666666; height:18px; font-size:12px; } .default_input2 { border:1px solid #666666; height:18px; font-size:12px; } .nowrite_input { border:1px solid #849EB5; height:18px; font-size:12px; background-color:#EBEAE7; color: #9E9A9E; } .default_list { font-size:12px; border:1px solid #849EB5; } .default_textarea { font-size:12px; border:1px solid #849EB5; } .nowrite_textarea { border:1px solid #849EB5; font-size:12px; background-color:#EBEAE7; color: #9E9A9E; } .wordtd5 { font-size: 12px; text-align: center; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #b8c4f4; } .wordtd { font-size: 12px; text-align: left; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #b8c4f4; } .wordtd_1 { font-size: 12px; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #516CD6; color:#fff; } .wordtd_2{ font-size: 12px; text-align: right; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #64BDF9; } .wordtd_3{ font-size: 12px; text-align: right; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #F1DD34; } .inputtd { font-size:12px; vertical-align:top; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; } .inputtd2 { text-align: center; font-size:12px; vertical-align:top; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; } .tablebg { font-size:12px; } .tb{ border-collapse: collapse; border: 1px outset #999999; background-color: #FFFFFF; } .td2{line-height:22px; text-align:center; background-color:#F6F6F6;} .td3{background-color:#B8D3F4; text-align:center; line-height:20px;} .td4{background-color:#F6F6F6;line-height:20px;} .td5{border:#000000 solid; border-right-width:0px; border-left-width:0px; border-top-width:0px; border-bottom-width:1px;} .tb td{ font-size: 12px; border: 2px groove #ffffff; } .noborder { border: none; } .button { border: 1px ridge #ffffff; line-height:18px; height: 20px; width: 45px; padding-top: 0px; background:#CBDAF7; color:#000000; font-size: 9pt; font-family:"Courier"; } .textarea { font-family: Arial, Helvetica, sans-serif, "??"; font-size: 9pt; color: #000000; border-bottom-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #000000; background-color:transparent; text-align: left } --> </style></head> <body> <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"> <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> <select name="first" multiple="multiple" size=10 class="td3" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="选项9">选项9</option> </select> </td> </tr> </table> </div> </body> <script type="text/javascript"> //<input name="add" id="add" type="button" class="button" value="-->" /> $("#add").click(function(){ $("#first>option:selected").appendTo($("#second")); }); //<input name="add_all" id="add_all" type="button" class="button" value="==>" /> $("#add_all").click(function(){ $("#first>option").appendTo($("#second")); }); //<input name="remove" id="remove" type="button" class="button" value="<--" /> $("#remove").click(function(){ $("#second>option:selected").appendTo($("#first")); }) //<input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> $("#remove_all").click(function(){ $("#second>option").appendTo($("#first")); }); $("#first").dblclick(function(){ $("#first>option:selected").appendTo($("#second")); }); $("#second").dblclick(function(){ $("#second>option:selected").appendTo($("#first")); }); </script> </html>
相关文章推荐
- jQuery 交换两个元素位置
- python列表中任意两个元素交换
- 两个列表框中的元素相互移动(源代码)
- jquery交换两个元素位置
- jquery书写左右两个多选下拉列表交换移除功能
- 不使用中间变量交换两个元素
- [jQuery] 两个ul之间li元素的拖拉和排序
- 有两个序列a,b,要求:通过交换a,b中的元素,使[序列a元素的和]与[序列b元素的和]之间的差最小。
- 交换两个元素的值,不用临时变量
- 用Java交换两个元素的swap函数
- 7,单链表交换任意两个元素(不包括表头)
- 有两个序列a,b,大小都为n,序列元素的值任意整数,无序;要求:通过交换a,b中的元素,使[序列a元素的和]与[序列b元素的和]之间的差最小。
- 用jQuery判断两个元素是否有重叠部分
- [jQuery] html中两个select之间option元素的add与remove,多值上传
- 每天学习一算法系列(29)(有两个序列a,b,大小都为n,序列元素的值任意整数,无序;要求:通过交换a,b 中的元素,使[序列a 元素的和]与[序列b 元素的和]之间的差最小)
- 交换两个数组的元素,使两个数组和的差最小
- 算法面试题:找出由两个有序列表合并而成的新列表中的第n个元素
- 使用Jquery随机删除一个顺序列表中某个子元素的方法,保持效果统一性
- [微软]有两个序列a,b,大小都为n,序列元素的值任意整数,无序; 要求:通过交换a,b中的元素,使[序列a元素的和]与[序列b元素的和]之间的差最小
- 有两个数组a,b,大小都为n,数组元素的值任意,无序;要求:通过交换a,b中的元素,使数组a元素的和与数组b元素的和之间的差最小