上网找了一下下拉多选方面的插件,其中发现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("请选择"); } }); });
就这么简单的就用起来了!
效果图片如下附件