直接上代码： (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);