您的位置:首页 > 其它

你知道吗,如何使用select2插件实现下拉框一次性选多个值、以及数据的回显

2018-02-13 10:07 721 查看
页面展示标签
<td class="vatop rowform" style="width:auto;">
                    <select style="width: 285px;" class="combox" name="investmentMethod" id="investmentMethod" multiple
                            required>
                        <#if investmentList?if_exists>
                            <#list investmentList as inverstment>
                                <option value="${inverstment}" selected>${inverstment}</option>
                            </#list>
                        </#if>
                        <option value="不限">不限</option>
                        <option value="合资">合资</option>
                        <option value="合作">合作</option
                        <option value="独资">独资</option>
                        <option value="技术转让">技术转让</option>
                        <option value="补偿贸易(回购)">补偿贸易(回购)</option>
                        <option value="并购">并购</option>
                        <option value="BOT">BOT</option>
                        <option value="其他">其他</option>
                    </select>
  </td>
访问页面时,需要加载到浏览器内核的脚本以及样式
<script type="text/javascript" src="${base}/res/js/select2/select2.min.js"></script>
<link href="${base}/res/css/select2/select2.min.css" rel="stylesheet"/>

页面加载时下拉框实现这个函数的处理之后即可用
$(document).ready(function () {
        $('#investmentMethod').select2();

    }); 

//回显的值有重复的怎么办,去除、只选一个
$(document).ready(function(){
        $("#investmentMethod option").each(function() {   /*作用:遍历select option */
            var getText = $(this).text();
            if($("#investmentMethod option:contains("+getText+")").length > 1)   /*作用:select option:contains("+text+")")包含text的个数 */
            {
                $("#investmentMethod option:contains("+getText+"):gt(0)").remove();  /*作用:包含text大于个数0的选项就移除*/
            }
        });
    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐