第一种：(这种js实现方式，比较繁琐)如下：

<script language="javascript" src="jquery.js"></script>

<div>

<p style="float:left;">

 <select size="15" multiple="multiple" id="src" style="width:100px;height:120px">

  <option value="x1" >aa</option>

  <option value="x2" class="seloption">bb</option>

  <option value="x3" class="seloption">cc</option>

  <option value="x4" class="seloption">dd</option>

  <option value="x5" class="seloption">ee</option>

 </select>

</p>

<p style="float:left;width:34px">

 <button style="width:30px;height:28px"  ('src','dest',1,'showSelect');">&gt;</button>

 <button style="width:30px;height:28px" /button>

 <button style="width:30px;height:29px" /button>

 <button style="width:30px;height:29px" /button>

</p>

<p style="float:left;">

 <select size="15" multiple="multiple" id="dest" style="width:100px;height:120px">

 </select>

</p>

<input type="hidden" value="" name="showSelect" id="showSelect"/>


<script type="text/javascript">

function add(srcid,destid,types,saveid) {

 var src = document.getElementById(srcid);

 var dest = document.getElementById(destid);

 for (var i = src.length - 1; i >= 0; i--) {

  if (src.options[i].selected == true) {

var newoption = new Option(src.options[i].text,src.options[i].value);

if(types==1) {

$("#dest").bind('dblclick',function () {

  add('dest','src',0,'showSelect');

   });

} else {

    $("#src").bind('dblclick',function () {

        add ('src','dest',1,'showSelect');

      });

}

   dest.options.add(newoption);

   src.options.remove(i);

  }

 }

 choiceSave(srcid,destid,types,saveid);

};


function addAll(srcid,destid,type,saveid) {

 var src = document.getElementById(srcid);

 var dest = document.getElementById(destid);

 for (var i = 0; i < src.length; i++) {

  dest.options.add(new Option(src.options[i].text,src.options[i].value));

 }

 src.length = 0;

 choiceSave(srcid,destid,type,saveid);

};

function choiceSave(srcid,destid,type,saveid) {

 if (type == 1){

  saveSelect(destid,saveid);

$("#dest").bind('dblclick',function () {

  add('dest','src',0,'showSelect');

   });

 } else {

  saveSelect(srcid,saveid);

  $("#src").bind('dblclick',function () {

 add ('src','dest',1,'showSelect');

 });

 }

};

function saveSelect(showid,saveid) {

 var show = document.getElementById(showid);

 var save = document.getElementById(saveid);

 save.value = "";

 if (show.length > 0) {

  for (var i = 0; i < show.length; i++) {

   save.value += (show.options[i].value + ","+show.options[i].text+",");

  }

  save.value = save.value.substring(0,save.value.length - 1);

 }

};

function setss() {

add ('src','dest',1,'showSelect');

}


$(document).ready(function(){

$("#src").bind('dblclick',function () {

 add ('src','dest',1,'showSelect');

 });

});

</script>

</div>


第二种：（自己写的一个用jquery实现的，相对比较简单）如下：

#lefDiv {

position:absolute;

left:138px;

top:191px;

width:180px;

z-index:1;

}

#moveDiv {

position:absolute;

left:346px;

top:276px;

width:59px;

height:67px;

z-index:2;

}

#rightDiv {

position:absolute;

left:430px;

top:190px;

width:180px;

z-index:3;

}

<div id="lefDiv" style="width:180px;">

<span><input type="checkbox" name="typeCheck"/>&nbsp;游戏</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;电影</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;音乐</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;图片</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;美女</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;帅哥</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;健康</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;休闲</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;养生</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;科技</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;冒险</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;益智</span>

<span><input type="checkbox" name="typeCheck"/>&nbsp;医疗</span>

</div>

<div id="moveDiv">

<span id="toRight">》》</span>

<span id="toLeft">《《</span>

</div>

<div id="rightDiv" style="width:180px;">

<p>您已选中.....</p>

</div>

<script language="javascript">

 $(document).ready(function(){


$("#toRight").click(function(){

($('input[name="typeCheck"]:checked').parent()).appendTo("#rightDiv");

$("#rightDiv :[name = typeCheck]:checkbox").attr("name", "typeCheckRight");

});


$("#toLeft").click(function(){

$("#lefDiv").append($('input[name="typeCheckRight"]:checked').parent());

$("#lefDiv :[name = typeCheckRight]:checkbox").attr("name", "typeCheck");

});


 });

</script>