正文
一个简单的jquery左右列表内容切换应用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
选中左边某个选项点击添加，即可将选中项添加到右边文本框中，点击选中全部即可将全部选项移到右边，移除按钮功能相同。
html代码：
<div id="main">
<div id="left">
<div id="select1" class="sel">
<span>apple</span>
<span>huawei</span>
<span>htc</span>
<span>samsung</span>
</div>
<button id="add" value="选中添加">选中添加</button><br>
<button id="add_all" value="选中全部">选中全部</button>
</div>
<div id="right">
<div id="select2" class="sel"> </div>
<button id="remove" value="移除添加">移除添加</button><br>
<button id="remove_all" value="移除全部">移除全部</button>
</div>
</div>
css：
<style type="text/css">
.sel{
width: 100px;
height: 160px;
border:1px solid black;
}
span{
display: block;
}
#left,#right{
float: left;
border:1px solid black;
margin-right: 20px;
}
.light{
background-color: blue;
}
</style>
jquery：
<script type="text/javascript">
$('span').click(function(){
$(this).addClass("light").siblings().removeClass("light"); //当点击span标签时为它添加高亮样式light，并移除除选中项外的其他同级标签的light属性；
});
$("#add").click(function(){
var options=$("#select1>.light");//获取选中项；
options.removeClass("light").appendTo("#select2"); //将该span标签的light属性移除并移到右边； });
$("#add_all").click(function(){
var options=$("#select1 span");
options.appendTo("#select2");
});
$("#remove").click(function(){
var options=$(".light");
options.removeClass("light").appendTo("#select1");
});
$("#remove_all").click(function(){
var options=$("#select2 span");
options.appendTo("#select1");
});
</script>
