jquery实现左右选择移动的列表框直接上代码：(https://www.jq22.com)返回给上父窗口：

直接上代码： (www.jq22.com)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右移动的下拉框（原创）-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
	list-style-type:none;
	outline:none;
}
a,img {
	border:0;
}
body {
	font:12px/normal "microsoft yahei";
}
.selectbox {
	width:500px;
	height:220px;
	margin:100px auto;
	position:relative
}
.selectbox div {
	float:left;
}
.selectbox .select-bar {
	padding:0 20px;
}
.selectbox .select-bar select {
	width:150px;
	height:200px;
	border:1px #A0A0A4 solid;
	padding:4px;
	font-size:14px;
	font-family:"microsoft yahei";
}
.btn-bar {
	}.btn-bar p {
	margin-top:16px;
}
.btn-bar p .btn {
	width:50px;
	height:30px;
	cursor:pointer;
	font-family:simsun;
	font-size:14px;
}
</style>
</head>
<body>
<div class="selectbox">
  <div class="select-bar">
    <div style=" position: absolute; z-index: 2;top: -20px;left: 55px;"><span>账号列表</span></div>
    <select multiple="multiple" id="select1">
      <option>测试1</option>
      <option>测试2</option>
      <option>测试3</option>
      <option>测试4</option>
      <option>测试5</option>
      <option>测试6</option>
    </select>
  </div>
  <div class="btn-bar">
    <p><span id="add">
      <input type="button" class="btn" value=">" title="移动选择项到右侧">
      </span> </p>
    <p><span id="add_all">
      <input type="button" class="btn" value=">>" title="全部移到右侧">
      </span></p>
    <p><span id="remove">
      <input type="button" class="btn" value="<" title="移动选择项到左侧">
      </span></p>
    <p><span id="remove_all">
      <input type="button" class="btn" value="<<" title="全部移到左侧">
      </span></p>
  </div>
  <div class="select-bar" style="position: relative">
    <div style=" position: absolute; z-index: 2;top: -20px;left: 40px;"><span>已分配账号</span></div>
    <select multiple="multiple" id="select2" name="accountIds">
    </select>
  </div>
</div>

<script>
 $(function() {
     //移到右边
     $('#add').click(function() {
         //先判断是否有选中
         if (!$("#select1 option").is(":selected")) {
             alert("请选择需要移动的选项")
         }
         //获取选中的选项，删除并追加给右边
         else {
             $('#select1 option:selected').appendTo('#select2');
         }
     });

     //移到左边
     $('#remove').click(function() {
         //先判断是否有选中
         if (!$("#select2 option").is(":selected")) {
             alert("请选择需要移动的选项")
         } else {
             $('#select2 option:selected').appendTo('#select1');
         }
     });

     //全部移到右边
     $('#add_all').click(function() {
         //获取全部的选项,删除并追加给右边
         $('#select1 option').appendTo('#select2');
     });

     //全部移到左边
     $('#remove_all').click(function() {
         $('#select2 option').appendTo('#select1');
     });

     //双击选项
     $('#select1').dblclick(function() { //绑定双击事件
         //获取全部的选项,删除并追加给右边
         $("option:selected", this).appendTo('#select2'); //追加右边
     });
      $('#select2').dblclick(function() { //绑定双击事件
         //获取全部的选项,删除并追加给对方
         $("option:selected", this).appendTo('#select1'); //追加给对方
     });
 });
</script>

</body>
</html>

返回给上父窗口：


function sltok(){
    var select_values = [];
    var select_texts = [];
    $("#select2 option").each(function () {
        select_values.push($(this).val());
        select_texts.push($(this).text().trim());
    });
    v=select_values.join(",");
    t=select_texts.join(",");
    parent.$("#sltids").val(v);
    parent.$("#sltnames").val(t);