jquery 穿梭框,可上下左右,全选移动

13 篇文章 0 订阅
1 篇文章 0 订阅

HTML部分

<table align="center" cellpadding="0" cellspacing="0">
			<tr>
				<td>
					可选择表项
				</td>
				<td></td>
				<td>
					已选择表项
				</td>
			</tr>
			<tr>
				<td>
					<select multiple="multiple" id="leftselect" name="leftselect"
						style="width: 100px; height: 160px;">
						<option value="1">
							选项1
						</option>
						<option value="2">
							选项2
						</option>
						<option value="3">
							选项3
						</option>
						<option value="4">
							选项4
						</option>
						<option value="5">
							选项5
						</option>
						<option value="6">
							选项6
						</option>
						<option value="7">
							选项7
						</option>
						<option value="8">
							选项8
						</option>
					</select>

				</td>
				<td>
					<input type="button" class="button" id="add" value="选中向右" width="6">
					<br>
					<input type="button" class="button" id="remove" value="选中向左">
					<br>
					<input type="button" class="button" id="alladd" value="全部向右">
					<br>
					<input type="button" class="button" id="allremove" value="全部向左">
				</td>
				<td>
					<select multiple="multiple" id="rightselect" name="rightselect"
						style="width: 100px; height: 160px;">
					</select>
				</td>
			</tr>
			<tr>
				<td align="center">
					<input id="left_up"  class="button" type="button" value="向上" />
					&nbsp;&nbsp;&nbsp;
					<input id="left_down" class="button" type="button" value="向下" />
				</td>
				<td></td>
				<td align="center">
					<input id="right_up"  class="button" type="button" value="向上" />
					&nbsp;&nbsp;&nbsp;
					<input id="right_down" class="button" type="button" value="向下" />
				</td>
			</tr>
		</table>

js部分

//全部向右
		$('#alladd').click(function() {
			$('#leftselect option').remove().appendTo('#rightselect');
		});
		//全部向左
		$('#allremove').click(function() {
			$('#rightselect option').remove().appendTo('#leftselect');
		});
		//选中向右
		$('#add').click(function() {
			$('#leftselect option:selected').remove().appendTo('#rightselect');
		});
		//选中向左
		$('#remove').click(function() {
			$('#rightselect option:selected').remove().appendTo('#leftselect');
		});
		//左边框双击向右移动
		$('#leftselect').dblclick(function() {
			$("option:selected", this).remove().appendTo('#rightselect');
		});
		//右边框双击向右移动
		$('#rightselect').dblclick(function() {
			$("option:selected", this).remove().appendTo('#leftselect');
		});
		//左边框往上移动
		$('#left_up')
				.click(
						function() {
							var index = $('#leftselect option').index(
									$('#leftselect option:selected:first'));
							var $recent = $('#leftselect option:eq(' + (index - 1) + ')');
							if (index > 0) {
								var $options = $('#leftselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.before($options)
								}, 10);
							}
						});
		//左边框往下移动
		$('#left_down')
				.click(
						function() {
							var index = $('#leftselect option').index(
									$('#leftselect option:selected:last'));
							var len = $('#leftselect option').length - 1;
							var $recent = $('#leftselect option:eq(' + (index + 1) + ')');
							if (index < len) {
								var $options = $('#leftselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.after($options)
								}, 10);
							}
						});
		//右边框往上移动
		$('#right_up')
				.click(
						function() {
							var index = $('#rightselect option').index(
									$('#rightselect option:selected:first'));
							var $recent = $('#rightselect option:eq(' + (index - 1) + ')');
							if (index > 0) {
								var $options = $('#rightselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.before($options)
								}, 10);
							}
						});
		//右边框往下移动
		$('#right_down')
				.click(
						function() {
							var index = $('#rightselect option').index(
									$('#rightselect option:selected:last'));
							var len = $('#rightselect option').length - 1;
							var $recent = $('#rightselect option:eq(' + (index + 1) + ')');
							if (index < len) {
								var $options = $('#rightselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.after($options)
								}, 10);
							}
						});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值