jQuery多选列表框插件Multiselect

效果如下图：

在官网这里下载所需的js,css等相关文件

然后引入以下文件：

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery.multiselect2side.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" /> 

Html：

<select  id='liOption' multiple='multiple' size='8' > 
    <option value="PHP">PHP</option> 
    <option value="MYSQL">MYSQL</option> 
    <option value="ASP.NET">ASP.NET</option> 
    <option value="XHTML">XHTML</option> 
    <option value="CSS">CSS</option> 
    <option value="JQUERY">JQUERY</option> 
</select> 

如果默认已经有选择的项，则看将option的属性selected设置为"selected"。

最后应用multiselect插件：

$(function(){ 
   $("#liOption").multiselect2side({ 
        selectedPosition: 'right', 
        moveOptions: false, 
        labelsx: '待选区', 
        labeldx: '已选区' 
   }); 
}); 

multiselect提供了一些属性的设置，selectedPosition：选择项的位置，默认为right，即最终获取选择的值是右边的列表框。

moveOptions：移动选项，可以用来给选项排序，实际应用意义不大，这里设置为false。

labelsx和labeldx是用来设置左右 两个列表框的标题，如果不需要可设置为空。

maxSelected：最大选项数，即最多只能选择几项。

转载于:https://www.cnblogs.com/pfs1314/archive/2011/11/30/2269414.html