Direct to the code: (www.jq22.com)

<! doctype html> <html> <head> <meta charset="utf-8"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> account list </span></div> <select multiple="multiple" id="select1"> <option> Test 1</option> <option> Test 2</option> <option> Test 3</option> <option> Test 4</option> <option> Test 5</option> <option> Test 6</option> </select> </div> <div class="btn-bar">
    <p><span id="add">
      <input type="button" class="btn" value=">" title="Move selection to the right">
      </span> </p>
    <p><span id="add_all">
      <input type="button" class="btn" value="> >" title="Move all to the right.">
      </span></p>
    <p><span id="remove">
      <input type="button" class="btn" value="<" title="Move the selection to the left">
      </span></p>
    <p><span id="remove_all">
      <input type="button" class="btn" value="< <" title="Move all to the left.">
      </span></p>
  </div>
  <div class="select-bar" style="position: relative">
    <div style=" position: absolute; z-index: 2; top: -20px; left: 40px;"</span></div> <select multiple="multiple" id="select2" name="accountIds">
    </select>
  </div>
</div>

<script>
 $(function() {// Move to the right $('#add').click(function() {// Check to see if there is a checkif(! $("#select1 option").is(":selected")) {
             alert("Please select the option to move."} // get the selected option, delete it, and append it to the rightelse{$('#select1 option:selected').appendTo('#select2'); }}); // Move to left $('#remove').click(function() {// Check to see if there is a checkif(! $("#select2 option").is(":selected")) {
             alert("Please select the option to move.")}else{$('#select2 option:selected').appendTo('#select1'); }}); // Move all to the right $('#add_all').click(function() {// Get all options, delete and append to right $()'#select1 option').appendTo('#select2'); }); // Move all to left $('#remove_all').click(function() {$('#select2 option').appendTo('#select1'); }); // Double-click the option $('#select1').dblclick(function() {// bind double click events // get all options, delete and append to right $()"option:selected", this).appendTo('#select2'); // append right}); $('#select2').dblclick(function() {// bind double click events // get all options, delete and append to each other $("option:selected", this).appendTo('#select1'); }); }); </script> </body> </html>Copy the code

Return to the parent window:


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);

Copy the code