ListBox多选框实现多选选项左移、右移
时间:2014-07-08 15:38 来源: 我爱IT技术网 作者:山风
使用jQuery方式实现ListBox多选框实现多选选项左移、右移方法：
具体范例请看：
<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>
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-