select下拉框左右双选功能—jQuery

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