Multiselect是一個(gè)采用jQuery實現的兩邊多(duō)選列表控件。可(kě)以将需要選定的項目從左邊添加到右邊的列表框中。或者将不需要的項目從右邊列表框中删除。

Multiselect有(yǒu)以下功能特性：

可(kě)以将列表框左右兩邊的項進行(xíng)移動（互換）。

可(kě)以通(tōng)過雙擊事件移動列表框中的項。

可(kě)以設置已選項目的最大(dà)數(shù)。

可(kě)以自定義外觀樣式。

怎樣使用？

1、準備jquery和(hé)jquery.multiselect2side插件以及CSS樣式。

插件和(hé)樣式文件在DEMO中已經包含，您可(kě)以下載整個(gè)DEMO就可(kě)以使用。

2、XHTML。

PHPMYSQLASP.NETXHTMLCSSJQUERY

我假設列表框中已存在一些(xiē)靜态項，這些(xiē)數(shù)據可(kě)以通(tōng)過動态加載進來(lái)。如果默認已經有(yǒu)選擇的項，則看将option的屬性selected設置為(wèi)"selected"。如：

PHP

3、應用multiselect插件。

$(function(){
   $("#liOption").multiselect2side({
	    selectedPosition: 'right',
	    moveOptions: false,
		labelsx: '待選區(qū)',
		labeldx: '已選區(qū)'
   });
});

multiselect提供了一些(xiē)屬性的設置，selectedPosition：選擇項的位置，默認為(wèi)right，即最終獲取選擇的值是右邊的列表框。moveOptions：移動選項，可(kě)以用來(lái)給選項排序，實際應用意義不大(dà)，這裏設置為(wèi)false。labelsx和(hé)labeldx是用來(lái)設置左右兩個(gè)列表框的标題，如果不需要可(kě)設置為(wèi)空(kōng)。maxSelected：最大(dà)選項數(shù)，即最多(duō)隻能選擇幾項。

在後面的文章中我會(huì)用一個(gè)專門(mén)的實例來(lái)講解多(duō)選列表框的查詢、加載、獲取數(shù)據的方法，敬請(qǐng)關注。