很久很久以前，我剛聽(tīng)說(shuō)過(guò)JQuery，然后在不知道javaeye還是blogjava上看到一篇《實(shí)現(xiàn)select multiple左右添加和刪除功能》的文章，寫(xiě)的很黃很暴力，我一緊張就打印下來(lái)了，昨天晚上拉肚子上廁所，突然找出打印稿，在廁所上看了一下，發(fā)現(xiàn)不錯(cuò)。這個(gè)文章的原作者我已經(jīng)不知道是誰(shuí)了，但是我要感謝他的奉獻(xiàn)精神。
為了表示對(duì)他的尊敬，我修改了他的代碼，為了更通用。代碼例子任然沿用原作者的風(fēng)格。希望大家喜歡。
原文實(shí)現(xiàn)select multiple左右添加和刪除功能》轉(zhuǎn)載：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>
<!--下面這個(gè)script元素里面包含的代碼您再修改一下，可以做為公用的放到您的項(xiàng)目的common.js里面。-->
<script type="text/javascript">
/**//* initCandidateList： 根據(jù)參數(shù)初始化候選列表里面的元素*/
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>
<!--下面這個(gè)script元素里面包含的代碼只針對(duì)這個(gè)頁(yè)面的功能，就放在這個(gè)頁(yè)面好了。-->
<script type="text/javascript">
$(document).ready(function() {
//first multiple select
initCandidateList('candidate_list', 5, '公開(kāi)招標(biāo)小型機(jī)采購(gòu)00');
attachAddButtonEvent('add', 'candidate_list', "select_list", '請(qǐng)選擇要添加的分包!');
attachDeleteButtonEvent('delete', 'candidate_list', "select_list", "請(qǐng)選擇要?jiǎng)h除的分包");
//second multiple select
initCandidateList('candidate_list2', 6, '非公開(kāi)招標(biāo)大型機(jī)采購(gòu)');
attachAddButtonEvent('add2', 'candidate_list2', "select_list2", '請(qǐng)選擇要添加的分包!');
attachDeleteButtonEvent('delete2', 'candidate_list2', "select_list2", "請(qǐng)選擇要?jiǎng)h除的分包");
})
</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>