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 onclick="getData()">getData</button>