一个简单的jquery左右列表内容切换应用
Posted 法克大叔叔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的jquery左右列表内容切换应用相关的知识,希望对你有一定的参考价值。
选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同。
html代码:
1 <div id="main"> 2 <div id="left"> 3 <div id="select1" class="sel"> 4 <span>apple</span> 5 <span>huawei</span> 6 <span>htc</span> 7 <span>samsung</span> 8 </div> 9 <button id="add" value="选中添加">选中添加</button><br> 10 <button id="add_all" value="选中全部">选中全部</button> 11 </div> 12 <div id="right"> 13 <div id="select2" class="sel"> 14 15 </div> 16 <button id="remove" value="移除添加">移除添加</button><br> 17 <button id="remove_all" value="移除全部">移除全部</button> 18 </div> 19 </div>
css:
1 <style type="text/css"> 2 .sel{ 3 width: 100px; 4 height: 160px; 5 border:1px solid black; 6 } 7 span{ 8 display: block; 9 } 10 #left,#right{ 11 float: left; 12 border:1px solid black; 13 margin-right: 20px; 14 } 15 .light{ 16 background-color: blue; 17 } 18 </style>
jquery:
1 <script type="text/javascript"> 2 $(\'span\').click(function(){ 3 $(this).addClass("light").siblings().removeClass("light"); //当点击span标签时为它添加高亮样式light,并移除除选中项外的其他同级标签的light属性; 4 }); 5 $("#add").click(function(){ 6 var options=$("#select1>.light");//获取选中项; 7 options.removeClass("light").appendTo("#select2"); //将该span标签的light属性移除并移到右边; 8 9 }); 10 $("#add_all").click(function(){ 11 var options=$("#select1 span"); 12 options.appendTo("#select2"); 13 }); 14 $("#remove").click(function(){ 15 var options=$(".light"); 16 options.removeClass("light").appendTo("#select1"); 17 }); 18 $("#remove_all").click(function(){ 19 var options=$("#select2 span"); 20 options.appendTo("#select1"); 21 }); 22 </script>
以上是关于一个简单的jquery左右列表内容切换应用的主要内容,如果未能解决你的问题,请参考以下文章