很久很久以前，我刚听说过JQuery，然后在不知道javaeye还是blogjava上看到一篇《实现select multiple左右添加和删除功能》的文章，写的很黄很暴力，我一紧张就打印下来了，昨天晚上拉肚子上厕所，突然找出打印稿，在厕所上看了一下，发现不错。这个文章的原作者我已经不知道是谁了，但是我要感谢他的奉献精神。
为了表示对他的尊敬，我修改了他的代码，为了更通用。代码例子任然沿用原作者的风格。希望大家喜欢。
原文实现select multiple左右添加和删除功能》转载：http://winhonourxzg.javaeye.com/blog/342987
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery life</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<!--下面这个script元素里面包含的代码您再修改一下，可以做为公用的放到您的项目的common.js里面。-->
<script type="text/javascript">
/**//* initCandidateList： 根据参数初始化候选列表里面的元素*/
function initCandidateList(candidateListId, listLength, preText) 
{
for (var i = 1; i <= listLength; i++)
{
$("#" + candidateListId).append("<option value='" + i + "'>" + preText + i + "</option>");
}
}
/**//*attachAddButtonEvent：给add按钮添加事件*/
function attachAddButtonEvent(addButtonId, candidateListId, selectedListId, msg) {
$(function() {
$("#" + addButtonId).click(function() {
if ($("#" + candidateListId + " option:selected").length > 0)
{
$("#" + candidateListId + " option:selected").each(function() {
$("#" + selectedListId).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
$(this).remove();
})
}
else
{
alert(msg);
}
})
})
}
/**//*attachDeleteButtonEvent：给delet按钮添加事件*/
function attachDeleteButtonEvent(deleteButtonId, candidateListId, selectedListId, msg) {
$(function() {
$("#" + deleteButtonId).click(function() {
if ($("#" + selectedListId + " option:selected").length > 0)
{
$("#" + selectedListId + " option:selected").each(function() {
$("#" + candidateListId).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
$(this).remove();
})
}
else
{
alert(msg);
}
})
})
}
</script>
<!--下面这个script元素里面包含的代码只针对这个页面的功能，就放在这个页面好了。-->
<script type="text/javascript">
$(document).ready(function() {
//first multiple select
initCandidateList('candidate_list', 5, '公开招标小型机采购00');
attachAddButtonEvent('add', 'candidate_list', "select_list", '请选择要添加的分包!');
attachDeleteButtonEvent('delete', 'candidate_list', "select_list", "请选择要删除的分包");
//second multiple select
initCandidateList('candidate_list2', 6, '非公开招标大型机采购');
attachAddButtonEvent('add2', 'candidate_list2', "select_list2", '请选择要添加的分包!');
attachDeleteButtonEvent('delete2', 'candidate_list2', "select_list2", "请选择要删除的分包");
})
</script>
</head>
<body>
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td colspan="4" align="center">选择第一组分包</td>
</tr>
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="candidate_list" multiple="multiple" style="text-align:center;width:300px;height:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add" value="添加>>"/>
<br/>
<br/>
<input type="button" id="delete" value="<<删除"/>
</td>
<td class="black" width="30%" align="center">
<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
</select>
</td>
</tr>
</table>
<br>
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td colspan="4" align="center">选择第二组分包</td>
</tr>
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="candidate_list2" multiple="multiple" style="text-align:center;width:300px;height:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add2" value="添加>>"/>
<br/>
<br/>
<input type="button" id="delete2" value="<<删除"/>
</td>
<td class="black" width="30%" align="center">
<select id="select_list2" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
</select>
</td>
</tr>
</table>
</body>
</html>