实现效果
样例图片
代码样例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多项选择框</title>
<style type="text/css">
select {
width: 200px; height: 200px; font-size: 16px
}
</style>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
function addIt() {
$('#output').append($('#input option:selected'));
}
function deleteIt() {
$('#input').append($('#output option:selected'));
}
function saveIt() {
alert($('#output').text());
}
</script>
</head>
<body>
<table border="0" align="center" style="margin-top: 20px;">
<tr>
<th>可选列表</th>
<th></th>
<th>已选列表</th>
</tr>
<tr>
<td align="right">
<select name="input" size="10" multiple="multiple" id="input">
<option>罗纳尔多,</option>
<option>贝克汉姆,</option>
<option>卡卡,</option>
<option>梅西,</option>
<option>罗纳尔迪尼奥,</option>
<option>罗比尼奥,</option>
</select>
</td>
<td align="center">
<p><input type="button" name="Submit" value="添加" onclick="addIt()" /></p>
<p><input type="button" name="Submit2" value="删除" onclick="deleteIt()" /></p>
</td>
<td>
<select name="output" size="10" multiple="multiple" id="output"></select>
</td>
</tr>
<tr>
<th colspan="3">
<input type="button" name="Submit" value="保存" onclick="saveIt()" />
<input type="button" name="Submit2" value="取消" onclick="window.close()" />
</th>
</tr>
</table>
</body>
</html>
