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