jquery 实现左移、右移

我们实现一个如下图所示的功能：

选中左侧的数据，把选中的数据右移到右侧的div中：

html代码如下：

 <input type="button" name="" id="showBth" value="显示" οnclick="showDiv();"/>
    <div id="showDiv" style="display:none;">
	     <div style="width:170px;float:left; text-align:center" >
			<select  name="listLeft" id="listLeft" class="listBoxStyle" multiple="multiple"></select> 
		</div>
		<div style="width:50px;float:left; padding-top:80px;">
			<input type="button" id="btnRight" style="font-size:14px;margin-top:20px;width:40px;" οnclick="toRight();" value=" >> " title="右移选中"/><br />
			<input type="button" id="btnAllMoveRight" style="font-size:14px;margin-top:20px;width:40px;" value=">>>>" title="全部右移"/><br />
			<input type="button" id="btnLeft" style="font-size:14px;margin-top:20px;width:40px;" value=" << " title="左移选中"/>
			<input type="button" id="btnAllMoveLeft" style="font-size:14px;margin-top:20px;width:40px;" value="<<<<" title="全部左移"/>
		</div>
		<div style="width:170px;float:left; text-align:center">
			<select  name="listRight" id="listRight" class="listBoxStyle"  multiple="multiple"></select>
		</div>
	</div>

定义一个样式listBoxStyle如下：

 .listBoxStyle { overflow-y:auto; font-size:12px;width:170px;height:340px;}

在页面初始化时为左侧的div加入数据，并除去重复数据：

$(function(){
    var jsonStr=strToJson("[{id:1,name:'小一'},{id:2,name:'小二'}]");
    var flag=true;
    for(var i=0;i<jsonStr.length;i++){
      $.each($("#listLeft option"),function(){
	       if(jsonStr.key==$(this).val()){
		       flag=false;
              return;
		   }
	  });
	  if(flag)
      $("#listLeft").append("<option value='"+jsonStr[i].id+"'>"+jsonStr[i].name+"</option>");
	}
  });

 function strToJson(str){
	var json = eval('(' + str + ')');
	return json;
 }

右移方法：

function toRight(){
   var nodes=$("#listLeft option:selected");
   $("#listRight").append(nodes);
 }

这是个简单的功能，只实现了简单的选中右移的方法，复杂的操作自己去做，这里只提供核心的代码和思路，在实际中可能会这样左侧为组织结构树，首先刷新出组织结构树，然后，点击组织结构树，得到json数据放入左侧div中，然后再如上述的进行操作。重在组合，如果结合我前面写的jquery+colorbox+ztree的文章，加一起可以做出很炫很复杂的功能了。