转兄弟博客 下拉多选

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

 

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

 

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

 

html片段：

Java代码  

1. <form id="companyTypeForm" method="post" name="companyTypeForm" action="companyType.do?method=save">  
2.   <table width="100%" border="0" cellspacing="0" cellpadding="0">  
3.   <tr>  
4.     <td>类型名称：</td>  
5.     <td>  
6.       <input type="text" name="name" />  
7.     </td>  
8.     <td>拥有角色：</td>  
9.     <td>  
10.         <select id="roleIds" name="roleIds" style="width:180px" multiple="multiple">  
11.             <c:forEach items="${roleList }" var="role">  
12.                 <option value="${role.id }">${role.name }</option>  
13.             </c:forEach>  
14.         </select>  
15.                 <font color="red" id="errRed"></font>        
16.      </td>  
17.   </tr>  
18.     
19.   <tr>  
20.     <td colspan="4">  
21.         <input name="save" type="submit" value="保存" />  
22.         <input name="reset" type="reset" value="重置" />  
23.         </td>  
24.     </tr>  
25. </table>  
26. </form>  

 

js片段：

Js代码  

1. $(document).ready( function() {  
2.   
3.     $("#roleIds").multiSelect({   
4.         selectAll: false,  
5.         oneOrMoreSelected: '*',  
6.         selectAllText: '全选',  
7.         noneSelected: '请选择'  
8.     }, function(){   //回调函数  
9.         if($("[name='roleIds']:checked").length > 0)  
10.         {  
11.             $("#errRed").empty();  
12.         }  
13.         else  
14.         {  
15.             $("#errRed").text("请选择");  
16.         }  
17.     });  
18.       
19. });  

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

 

博客：http://wang-min-zhao-sina-com.iteye.com/blog/1467204