下拉多选插件jquery.multiSelect的使用

上网找了一下下拉多选方面的插件，其中发现jquery.multiSelect是比较容易使用的一款，具体在文件附件里

 

下面用一个小例子说明一下：

 

需要在页面中引入这些文件，jquery.js，jquery.bgiframe.min.js，jquery.multiSelect.js，jquery.multiSelect.css

 

html片段：

<form id="companyTypeForm" method="post" name="companyTypeForm" action="companyType.do?method=save">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>类型名称：</td>
    <td>
      <input type="text" name="name" />
    </td>
    <td>拥有角色：</td>
    <td>
		<select id="roleIds" name="roleIds" style="width:180px" multiple="multiple">
	  		<c:forEach items="${roleList }" var="role">
	  			<option value="${role.id }">${role.name }</option>
	  		</c:forEach>
	 	</select>
                <font color="red" id="errRed"></font>      
     </td>
  </tr>
  
  <tr>
    <td colspan="4">
		<input name="save" type="submit" value="保存" />
		<input name="reset" type="reset" value="重置" />
		</td>
    </tr>
</table>
</form>

 

js片段：

$(document).ready( function() {

	$("#roleIds").multiSelect({ 
		selectAll: false,
		oneOrMoreSelected: '*',
		selectAllText: '全选',
		noneSelected: '请选择'
	}, function(){   //回调函数
		if($("[name='roleIds']:checked").length > 0)
		{
			$("#errRed").empty();
		}
		else
		{
			$("#errRed").text("请选择");
		}
	});
	
});

 就这么简单的就用起来了！

 

效果图片如下附件