萬盛學電腦網 >> 腳本專題 >> javascript >> Jquery多選框互相內容交換的實例代碼
Jquery多選框互相內容交換的實例代碼
<head runat="server">
<title>無標題頁</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 把選擇項追加給對方
$('#add').click(function(){
var options=$('#select1 option:selected');
var remove=options.remove();
remove.appendTo("#select2");
});
// 把所有項追加給對方
$('#addAll').click(function(){
var options=$('#select1 option');
var remove=options.remove();
remove.appendTo("#select2");
});
// 把選擇項退回給對方
$('#remove').click(function(){
var options=$('#select2 option:selected');
var remove=options.remove();
remove.appendTo("#select1");
});
// 把全部項退回給對方
$('#removeAll').click(function(){
var options=$('#select2 option');
var remove=options.remove();
remove.appendTo("#select1");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="left">
<select multiple="multiple" id="select1" style="width:100px;height:160px">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
</select>
</div>
<div>
<span id="add">選中項添加至右邊>></span><br />
<span id="addAll">全部添加到右邊>></span>
</div>
<div id="right">
<select multiple="multiple" id="select2" style="width:100px;height:160px"></select>
</div>
<div>
<span id="remove"><<選中項還原至左邊</span><br />
<span id="removeAll"><<全部還原至左邊</span>
</div>
</form>
</body>
