jquery-ui-multiselect 实现select下拉多选

1.下载需要的插件：
jquery-ui; 下载网站：http://jqueryui.com/download/all/（本实例使用jquery-ui-1.11.0）
jquery-ui-multiselect; 下载网站：https://github.com/ehynds/jquery-ui-multiselect-widget
注意：
   jquery-ui-1.11.0只需要/images和jquery-ui.min.css,jquery-ui.min.js
   jquery-ui-multiselect只需要jquery.multiselect.css,jquery.multiselect.js,jquery.multiselect.zh-cn.js

 即可实现基本功能；

2.引入一系类js和css：

<span style="white-space:pre">	</span><script type="text/javascript" src="${ctx }/jsp/resource/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${ctx }/jsp/web/resource/jquery-ui-1.11.0/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctx }/jsp/web/resource/jquery-ui-1.11.0/jquery-ui.min.css"/>
	<script type="text/javascript" src="${ctx }/jsp/web/resource/jquery-ui-multiselect/jquery.multiselect.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctx }/jsp/web/resource/jquery-ui-multiselect/jquery.multiselect.css"/>

3.代码块：

<span style="white-space:pre">	</span><style>
	.ui-multiselect{line-height:20px;height:25px;}//修改select显示框的高度
	</style>

javascript:

<span style="white-space:pre">	</span><script>
		$(function(){
		    $("select").multiselect({
		    	noneSelectedText: "--请选择--",
<span style="white-space:pre">		</span>    <span style="white-space:pre">	</span>header: false,//是否需要 头部的全选和全不选 
<span style="white-space:pre">		</span>      checkAllText: "全选",
<span style="white-space:pre">		</span>      uncheckAllText: '全不选',
<span style="white-space:pre">		</span>      selectedList:0,//选中后,在select中显示的选中text的个数,0代表不显示,只显示选中个数 
<span style="white-space:pre">		</span>      height: 100,//下拉选框的高度 
      <span style="white-space:pre">		</span>minWidth: 200  //整个select的最小宽度
		    });
		});
		//获取选中值
		function getData(){
			var selectsVa = $("select").multiselect("getChecked").map(function(){
               			return this.value;   
			}).get();
			for(var i=0;i<selectsVa.length;i++){
				alert(selectsVa[i]);
			}
		}
	</script>

html:

<span style="white-space:pre">	</span><select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">
		    <option value="V1">Option 1</option>
		    <option value="V2">Option 2</option>
		    <option value="V3">Option 3</option>
		    <option value="option4">Option 4</option>
		    <option value="option5">Option 5</option>
		    <option value="option6">Option 6</option>
		    <option value="option7">Option 7</option>
		    <option value="option8">Option 8</option>
		    <option value="option9">Option 9</option>
		    <option value="option10">Option 10</option>
		    <option value="option11">Option 11</option>
		    <option value="option12">Option 12</option>
	  </select>
	  <button οnclick="getData()">getData</button>