【问题标题】:maximumSelectionSize isn't working in Select2maximumSelectionSize 在 Select2 中不起作用
【发布时间】:2015-06-11 20:03:09
【问题描述】:

我有一个多值选择,我想使用 select2 库设置对所选项目数量的限制。

Documentation 表示我应该在对象初始化期间设置maximumSelectionSize。不幸的是,以下代码不起作用:

$(document).ready(function () {
    $("#select_demo").select2({
        maximumSelectionSize: 3
    });
});

我的 html 选择框:

<div class="form-group">
    <select id="select_demo" multiple="multiple" class="form-control select2 select2-container-multi">
        <optgroup label="One">
            <option>one</option>
            <option>two</option>
            <option>three</option>
            <option>four</option>
        </optgroup>
        <optgroup label="Two">
            <option>one2</option>
            <option>two2</option>
        </optgroup>
        <optgroup label="Three">
            <option>one3</option>
            <option>two3</option>
            <option>three3</option>
            <option>four3</option>
        </optgroup>
    </select>
</div>

http://jsfiddle.net/x4oqL1jr/2/

这段代码有什么问题?

【问题讨论】:

    标签: jquery compatibility jquery-select2 jquery-select2-4 jquery-select2-3


    【解决方案1】:

    select24.0 版 开始,他们已将maximumSelectionSize 替换为maximumSelectionLength

    所以,只需按以下方式更改 js 代码:

    $(document).ready(function () {
        $("#select_demo").select2({
            maximumSelectionLength: 3
        });
    });
    

    您可以通过以下链接找到最新的文档:https://select2.github.io/examples.html#multiple-max

    一切都像魅力一样:

    http://jsfiddle.net/4tk4hymn/1/

    更新:您还可以添加 data-maximum-selection-length="3" 属性,如 cmets 中指出的那样。例如,请参阅http://jsfiddle.net/1b8y9uzh/

    【讨论】:

    • 是否可以添加 data-maximumSelectionLength="2" ?
    • @AbhiBurk 我只是尝试修改上面的小提琴,不幸的是,它似乎不起作用。例如:jsfiddle.net/wz2qLj9k
    • 应该是这样的 data-maximum-selection-length="2.
    • 没有仍然无法正常工作.... $("#affected").select2({ tags: true, selectOnBlur: true, maximumSelectionLength: 1 }).on("change", function(e ) { var obj = $($("#affected").select2().find(":selected")[0]); if(obj === undefined) return; console.log(obj.attr("数据")); $("#tv_id").val(obj.attr("data")); }); $("#affected").select2({ tags: true, selectOnBlur: true, maximumSelectionLength: 1 });
    猜你喜欢
    • 1970-01-01
    • 2014-05-27
    • 2017-08-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多