<div id="selectBox" class="clearfix">
<!--左边-->
<div class="select_side pull-left">
<p>待选区</p>
<select id="leftSel" name="leftSel" multiple="multiple">
<option value="1">Mysql</option>
<option value="2">Redis</option>
<option value="3">MongoDB</option>
<option value="4">PHP</option>
<option value="5">Javascript</option>
<option value="6">Jquery</option>
<option value="7">Linux</option>
<option value="8">Ajax</option>
</select>
</div>
<!--按钮-->
<div class="select_opt pull-left">
<p id="leftButton">
<input type="button" name="add" id="add" value="→" />
</p>
<p id="leftAll">
<input type="button" class="" value="−−>>">
</p>
<p id="rightButton" >
<input type="button" name="del" id="del" value="←" />
</p>
<p id="rightAll">
<input type="button" id="" class="" value="<<−−">
</p>
</div>
<!--右边-->
<div class="select_side pull-right">
<p>已选区</p>
<select id="rightSel" name="rightSel" multiple="multiple"></select>
</div>
</div>
<!--获得选的值-->
<div class="sub_btn">
<input type="button" id="getValue" value="获得被选的value值" />
</div>
<style type="text/css">
#selectBox{
width: 400px;
height: 200px;
border: 1px solid #CCCCCC;
}
#leftSel,#rightSel{
width: 120px;
height: 100px;
overflow-y: auto;
}
.select_side{
width: 40%;
}
.select_opt{
margin-top: 20px;
/*margin-left: 20px;*/
}
.sub_btn{
margin-top: 10px;
}
input {
width: 60px;
}
</style>
<script type="text/javascript">
$(function() {
//从左边添加到右边
$("#leftButton").on('click', function() {
if($("#leftSel").find("option:selected").size() == 0){
alert("请至少选择一条!");
return;
}
//遍历选中的选项--从左边添加到右边
$("#leftSel").find("option:selected").each(function() {
$(this).remove().appendTo($("#rightSel"));
$("#rightSel").find("option").removeAttr("selected");
});
});
//从左边全部添加到右边
$('#leftAll').click(function() {
$('#rightSel').append($('#leftSel option'));
});
//从右边添加到左边
$("#rightButton").on('click', function() {
if($("#rightSel").find("option:selected").size() == 0){
alert("请至少选择一条!");
return;
}
//遍历选中的选项--从右边添加到左边
$("#rightSel").find("option:selected").each(function() {
$(this).remove().appendTo($("#leftSel"));
$("#leftSel").find("option").removeAttr("selected");
});
});
//从右边全部添加到左边
$('#rightAll').click(function() {
$('#leftSel').append($('#rightSel option'));
});
//左边双击添加到右边
$("#leftSel").dblclick(function() {
$(this).find("option:selected").each(function() {
$(this).remove().appendTo($("#rightSel"));
$("#rightSel").find("option").removeAttr("selected");
});
});
//从右边双击添加到左边
$("#rightSel").dblclick(function() {
$(this).find("option:selected").each(function() {
$(this).remove().appendTo($("#leftSel"));
$("#leftSel").find("option").removeAttr("selected");
});
});
//获取添加到右边的值
$("#getValue").click(function() {
var selValArr = [];
$("#rightSel").find("option").each(function() {
//将指定的元素值添加到数组中最后位置
selValArr.push(this.value);
});
//将数组转为字符串
selValStr = selValArr.join(",");
if(selValStr.length) {
alert(selValStr);
} else {
alert("还没有进行选择!");
}
});
});
</script>