<div id="main">
<div class="select_side">
<p>待选区</p>
<select id="leftSel" name="leftSel" multiple="multiple">
<option value="0">请选择</option>
<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">
<p id="left2Right" title="添加">></p>
<p id="right2Left" title="移除"><</p>
</div>
<div class="select_side">
<p>已选区</p>
<select id="rightSel" name="rightSel" multiple="multiple"></select>
</div>
<div class="sub_btn"><input type="button" id="getValue" value="getValue" /></div>
</div>
$(document).ready(function(){
//从左边添加到右边
$("#left2Right").on('click',function(){
//遍历选中的选项--从左边添加到右边
$("#leftSel").find("option:selected").each(function(){
$(this).remove().appendTo($("#rightSel"));
$("#rightSel").find("option").removeAttr("selected");
});
});
//从右边添加到左边
$("#right2Left").on('click',function(){
//遍历选中的选项--从右边添加到左边
$("#rightSel").find("option:selected").each(function(){
$(this).remove().appendTo($("#leftSel"));
$("#leftSel").find("option").removeAttr("selected");
});
});
//左边双击添加到右边
$("#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("还没有进行选择");
}
});
});