下拉列表框双向选择操作

<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("还没有进行选择");
		}
	});
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值