转兄弟博客 下拉多选

上网找了一下下拉多选方面的插件,其中发现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

 

 

你可能感兴趣的:(博客)