上网找了一下下拉多选方面的插件,其中发现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("请选择");
- }
- });
- });
就这么简单的就用起来了!
博客:http://wang-min-zhao-sina-com.iteye.com/blog/1467204