下拉框多选

1.引入多选的JS

<!-- 下拉框多选 -->
    <script type="text/javascript" src="/views/receipt/js/func.js?v=${applicationScope._ver }"></script>
    <script src="/js/jquery/multiple-select.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="/css/multiple-select.css"  rel="stylesheet"  type="text/css"/>

2.html中select标签上加multiple="multiple"，例如：

<div class="query_term" >
            <font>产品：</font>
            <select multiple="multiple" id="product" name="product" style="width:200px" >
                <%--动态获取--%>
                <%--动态获取数据--%>
                <c:forEach var="product" items="${productList}" >
                    <option value="${product.commCode}">${product.commCode}--${product.commVal}</option>
                </c:forEach>
            </select>
        </div>

3.js中写如下代码

 $('#product').multipleSelect({
        placeholder: "请选择",
        selectAllText:"选择所有",
        filter: true
    });

效果图

PS:不知道你们有没有遇到了这样的情况

遇到这种情况的小伙伴，可以在它的父层DIV加上overflow:visible