转兄弟博客 下拉多选

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