先看基本效果图：
因为是使用div+css来实现，所以样式随便改~~
下面就来大概说明一下实现过程：
1、定义HTML的结构
全左 向左 向右 全右待选列表
- 张三
- 李四
- 王五
已选列表
- 赵六
- 郭八
应该是一目了然吧。
2、来看看CSS样式部分
.selection{ width: 686px; position: relative; } .selection .left-box{ background-color: #FFDEAD; height: 320px; width: 300px; position: absolute; left: 0; overflow: auto; } .selection .right-box{ background-color: yellow; height: 320px; width: 300px; position: absolute; right: 0; overflow: auto; } .selection .mid-box{ background-color: orange; height: 320px; width: 70px; position: absolute; left: 308px; } #left-select, #right-select{ overflow: auto; list-style-type: none; } .selection ul{ padding: 0 15px; margin:15px 0; } .selection ul li{ height: 27px; line-height: 27px; margin: 2px 0; padding-left: 15px; cursor: pointer; background-color: orange; } .selected{ background-color: black; } .selection .mid-box a{ display: block; font-size: 16px; text-align: center; margin-top: 10px; font-weight: bold; } .selection h3{ background-color: #DC143C; margin: 0; padding: 10px 5px; color: white; }
3、Javascript（jQuery）部分
$(function(){ $(".selection ul li").live("click", function(){ if($(this).hasClass("selected")){ $(this).removeClass("selected").css("background-color","orange"); }else{ $(this).addClass("selected").css("background-color","white"); } }); $(".selection .moveToRight").click(function(){ var $lSeleted = $(".left-box .selected"); if($lSeleted.length > 0){ $("#right-select").append($lSeleted.remove()); resetBgColor("right-select"); } }); $(".selection .moveAllToRight").click(function(){ var $lAllSeleted = $(".left-box li"); if($lAllSeleted.length > 0){ $("#right-select").append($lAllSeleted.remove()); resetBgColor("right-select"); } }); $(".selection .moveAllToLeft").click(function(){ var $rAllSeleted = $(".right-box li"); if($rAllSeleted.length > 0){ $("#left-select").append($rAllSeleted.remove()); resetBgColor("left-select"); } }); $(".selection .moveToLeft").click(function(){ var $rSeleted = $(".right-box .selected"); if($rSeleted.length > 0){ $("#left-select").append($rSeleted.remove()); resetBgColor("left-select"); } }); }) function resetBgColor(leftOrRight){ $("#"+leftOrRight+" li").removeClass("selected").css("background-color","orange"); }
从Class的定义上基本可以了解各函数的功能。
附上执行档地址：http://www.zhaojz.com.cn/demo/select.html