<html>
<head>
<title>ListBox多選框實現多選選項左移、右移 (使用jQuery方式)</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/JavaScript"></script>
<script type="text/javascript">
function add(listbox1, listbox2) {
$('select[name=' + listbox1 + '] option:selected').appendTo('#' + listbox2);
}
function addall(listbox1, listbox2) {
$('select[name=' + listbox1 + '] option').appendTo('#' + listbox2);
}
function remove(listbox1, listbox2) {
$('select[name=' + listbox2 + '] option:selected').appendTo('#' + listbox1);
}
function removeall(listbox1, listbox2) {
$('select[name=' + listbox2 + '] option').appendTo('#' + listbox1);
}
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td>
<select size="4" name="lbItem1" multiple="multiple" id="lbItem1" class="listbox" style="width:150px;height:174px;">
<option value="BR">BR - 長榮航空</option>
<option value="CA">CA - 中國國際</option>
<option value="CI">CI - 中華航空</option>
<option value="CX">CX - 國泰航空</option>
<option value="EG">EG - 日亞航</option>
<option value="JL">JL - 日本航空</option>
<option value="KA">KA - 港龍航空</option>
<option value="KL">KL - 荷蘭航空</option>
<option value="MU">MU - 中國東方航空</option>
<option value="NX">NX - 澳門航空</option>
<option value="QF">QF - 澳洲航空</option>
<option value="SQ">SQ - 新加坡航空</option>
<option value="TG">TG - 泰國航空</option>
</select>
</td>
<td>
<input type="button" value=">" class="button" style="width: 50px;" onclick="add('lbItem1','lbItem2')" /><br />
<input type="button" value=">>" class="button" style="width: 50px;" onclick="addall('lbItem1','lbItem2')" /><br />
<input type="button" value="<" class="button" style="width: 50px;" onclick="remove('lbItem1','lbItem2')" /><br />
<input type="button" value="<<" class="button" style="width: 50px;" onclick="removeall('lbItem1','lbItem2')" /><br />
</td>
<td>
<select size="4" name="lbItem2" multiple="multiple" id="lbItem2" class="listbox" style="width:150px;height:174px;">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
.gif)
