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