穿梭框：HTML5 select 标签模拟穿梭框

一、HTML5 select 标签模拟穿梭框效果
二、源码
<!DOCTYPE html>

<head>
	<meta charset="UTF-8" />
	<title>穿梭框</title>
	<style type="text/css">
		::-webkit-scrollbar {
			width: 0px
		}
		
		.select {
			width: 600px;
			height: 220px;
			margin: 100px auto;
		}
		
		.select div {
			float: left;
		}
		
		.select .select-item {
			padding: 5px 20px;
		}
		
		.select .select-item select {
			width: 150px;
			height: 200px;
			border: 1px #eee solid;
			padding: 4px;
			font-size: 14px;
		}
		
		.btn-item p {
			margin-top: 16px;
		}
		
		.btn-item p span {
			display: block;
			text-align: center;
			width: 50px;
			height: 30px;
			cursor: pointer;
			font-size: 14px;
			border: 1px solid #EEEEEE;
			line-height: 30px;
			font-size: 20px;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			//移到右边
			$(document).on('click', '#add', function() {
				if(!$("#select1 option").is(":selected")) {
					alert("请选择移动的选项")
				} else {
					$('#select1 option:selected').appendTo('#select2');
				}
			});
			//移到左边
			$(document).on('click', '#remove', function() {
				if(!$("#select2 option").is(":selected")) {
					alert("请选择移动的选项")
				} else {
					$('#select2 option:selected').appendTo('#select1');
				}
			});
			//双击选项
			$(document).on('dblclick', '#select1', function() {
				$("option:selected", this).appendTo('#select2');
			});
			//双击选项
			$(document).on('dblclick', '#select2', function() {
				$("option:selected", this).appendTo('#select1');
			});
			//全部移到右边
			$(document).on('click', '#add_all', function() {
				$('#select1 option').appendTo('#select2');
			});
			//全部移到左边
			$(document).on('click', '#remove_all', function() {
				$('#select2 option').appendTo('#select1');
			});

		});
	</script>
</head>

<body>
	<div>
		<div class="select">
			<div class="select-item">
				<select multiple="multiple" id="select1">
					<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>
					<option value="选项9">选项9</option>
					<option value="选项10">选项10</option>
					<option value="选项11">选项11</option>
					<option value="选项12">选项12</option>
					<option value="选项13">选项13</option>
					<option value="选项14">选项14</option>
					<option value="选项15">选项15</option>
					<option value="选项16">选项16</option>
				</select>
			</div>
			<div class="btn-item">
				<p><span id="add">></span></p>
				<p><span id="remove"><</span></p>
				<p><span id="add_all">>></span></p>
				<p><span id="remove_all"><<</span></p>
			</div>
			<div class="select-item">
				<select multiple="multiple" id="select2"></select>
			</div>
		</div>
	</div>
</body>

</html>
穿梭框：HTML5 select 标签模拟穿梭框

猜你喜欢
