转兄弟博客下拉多选 - 军军小站|张军博客

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

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

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

html片段：

          
     Java代码   
    
            <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片段：

          
     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

转兄弟博客下拉多选

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义