對列表框的操作(zuò)經常碰到過這樣的應用：從左側的列表框中選中要選的項添加到右側列表框中，然後提交最終選擇的項，對誤操作(zuò)而選中的項還(hái)可(kě)以執行(xíng)移除操作(zuò)。在很(hěn)多(duō)系統中應用比如說求職網站(zhàn)的選擇意向工作(zuò)地區(qū)，QQ好友(yǒu)管理(lǐ)添加好友(yǒu)到組。

本站(zhàn)在前面有(yǒu)文章介紹了jquery的一個(gè)插件multiselect2side的應用Multiselect：操作(zuò)多(duō)選列表框，但(dàn)是我在實際應用中遇到的問題，該插件就不好使了，比如從外部實時(shí)加載查詢的數(shù)據，重複添加問題，以及驗證最終是否選中項。

本文将用實例來(lái)講解使用jQuery實現左右列表框的操作(zuò)，主要有(yǒu)以下效果：

• 通(tōng)過左右按鈕向右側列表框添加項或移除項操作(zuò)。
• 通(tōng)過雙擊兩邊列表框裏的項可(kě)以進行(xíng)添加或移除項。
• 獲取右側列表框裏的選項值。

XHTML

	
	

		待選區(qū)
	
王新安 - 13800138000李密 - 13800138001姜瑜 - 13800138002錢(qián)書(shū)記 - 13800138004



	
	

		>
	

	

		<
	




	
	

		已選區(qū)
	




	

頁面由左右兩個(gè)列表框以及操作(zuò)按鈕項組成。通(tōng)過CSS來(lái)控制(zhì)三者并排一行(xíng)。

CSS

.select_side{float:left; width:200px}
select{width:180px; height:120px}
.select_opt{float:left; width:40px; height:100%; margin-top:36px}
.select_opt p{width:26px; height:26px; margin-top:6px; background:url(arr.gif) no-repeat;
 cursor:pointer; text-indent:-999em}
.select_opt p#toright{background-position:2px 0}
.select_opt p#toleft{background-position:2px -22px}

我設置了兩個(gè)列表框都左浮動float:left，同時(shí)将操作(zuò)按鈕項也左浮動，主要就使得(de)三者橫向排列。值得(de)注意是，在設置操作(zuò)按鈕時(shí)，我使用了一張背景圖片，這張圖片包括了左右兩個(gè)方向箭頭的按鈕，如下圖，然後通(tōng)過background-position來(lái)定位圖片的位置，這個(gè)方法目前已經在很(hěn)多(duō)網站(zhàn)中得(de)到應用。

jQuery

首先，綁定向右的方向建按鈕的click事件，當單擊按鈕時(shí)，左側列表框選中的項會(huì)添加到右側列表框中，完成添加的操作(zuò)。

var leftSel = $("#selectL");
var rightSel = $("#selectR");
$("#toright").bind("click",function(){		
	leftSel.find("option:selected").each(function(){
		$(this).remove().appendTo(rightSel);
	});
});

同樣，綁定向左的方向建按鈕的click事件，當單擊按鈕時(shí)，右側列表框選中的項會(huì)添加到左側列表框中，完成移除的操作(zuò)。

$("#toleft").bind("click",function(){		
	rightSel.find("option:selected").each(function(){
		$(this).remove().appendTo(leftSel);
	});
});

接下來(lái)，需要完成雙擊選擇事件，當雙擊該項時(shí)，該項立即從該列表框中移除，并添加到與之相對的列表框中。

leftSel.dblclick(function(){
	$(this).find("option:selected").each(function(){
		$(this).remove().appendTo(rightSel);
	});
});
rightSel.dblclick(function(){
	$(this).find("option:selected").each(function(){
		$(this).remove().appendTo(leftSel);
	});
});

以上(shàng)代碼是有(yǒu)點多(duō)，但(dàn)是非常直觀，而且非常容易理(lǐ)解，有(yǒu)了這些(xiē)操作(zuò)後，就能對列表框的值進行(xíng)随心所欲的控制(zhì)了。

我們知道(dào)，後台程序要獲取選擇框的值，隻有(yǒu)當選擇框選中了項，後台才能獲取提交的選項的值，但(dàn)是問題就出在我們這個(gè)列表框有(yǒu)移除的操作(zuò)，當用戶執行(xíng)了移除操作(zuò)時(shí)，右側列表框中本來(lái)已選中的項全部取消選中狀态，這時(shí)再去提交，後台是獲取不到提交的選項值的。那(nà)麽我們應該處理(lǐ)的是，不管右側的項是否選中，我們都認為(wèi)右側列表框為(wèi)選中的項，事實也是如此，這樣我們隻需将右側選擇框中的項組成一個(gè)字符串或數(shù)組提交給後台就OK。看代碼：

$("#sub").click(function(){
	var selVal = [];
	rightSel.find("option").each(function(){
		selVal.push(this.value);
	});
	selVals = selVal.join(",");
	//selVals = rightSel.val();
	if(selVals==""){
		alert("沒有(yǒu)選擇任何項！");
	}else{
		alert(selVals);
	}
});

最終得(de)到的結果是一串以“,”号隔開(kāi)的字符串。