jQuery实现Select左右复制移动内容
引入的文件为<script type="text/javascript" src="jquery-1.10.2.js"></script>
双击也可以移动
[1].[代码]
<script type="text/javascript">
$(function(){
//移到右边
$("#add").click(function(){
//获取选中的选项，删除并追加给对方
$("#select1 option:selected").appendTo("#select2");
});
//移到左边
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
//全部移到右边
$("#add_all").click(function(){
//获取全部的选项，删除并追加给对放
$("#select1 option").appendTo("#select2");
});
//全部移到左边
$("#remove_all").click(function(){
$("#select2 option").appendTo("#select1");
});
//双击选项
$("#select1").dblclick(function(){//绑定双击事件
//获取全部的选项，删除并追加给对方
$("option:selected",this).appendTo("#select2");//追加给对方
});
//双击选项
$("#select2").dblclick(function(){
$("option:selected",this).appendTo("#select1");
});
})
</script>[2].[代码]
<body> <h1>Select JQuery 实现左右复制移动内容</h1> <div style="width:500px;"> <div class="centent" style="float:left;"> <select multiple="multiple" id="select1" style="width:130px;height:160px;"> <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> <div> <button id="add" >选中添加到右边>></button><br> <button id="add_all" >全部添加到右边>></button> </div> </div> <div class="centent" style="padding-left:160px;"> <select multiple="multiple" id="select2" style="width: 130px;height:160px;"> </select> <div> <button id="remove"><<选中删除到左边</button><br> <button id="remove_all"><<全部删除到左边</button> </div> </div> </div> </body>
[3].[图片]
[4].[图片]
相关推荐
李永毅 2020-06-21
专注前端开发 2020-10-21
苏康申 2020-11-13
vitasfly 2020-11-12
oraclemch 2020-11-06
liuyang000 2020-09-25
FellowYourHeart 2020-10-05
赵继业 2020-08-17
whyname 2020-08-16
Seandba 2020-08-16
dbasunny 2020-08-16
拼命工作好好玩 2020-08-15
langyue 2020-08-15
写程序的赵童鞋 2020-08-03
Accpcjg 2020-08-02
tydldd 2020-07-30
好记忆也需烂 2020-07-28