select2 jquery 插件重置 select 具有预 select 项的元素

Question

我正在使用 Select2 标签输入 jQuery 插件。

我通过两个 json 格式化变量和使用 initSelection 选项设置预selected 项目。

一切正常，但是当我从 select 框中选择一个新项目时，以前的项目会从中删除。

我该如何解决这个问题？

var allTags = [{
    "tag_id": 1,
    "tag_title": "Laravel"
}, {
    "tag_id": 3,
    "tag_title": "jQuery"
}, {
    "tag_id": 4,
    "tag_title": "HTML"
}];

var postTags = ["tag_id": 3, "tag_title": "jQuery"
}, {
        "tag_id": 4,
        "tag_title": "HTML"
    }
    }];
var allTags = $.map(allTags, function (obj) {
    obj.id = obj.id || obj.tag_id;
    obj.text = obj.text || obj.tag_title;
    return obj;
});

var postTag = $.map(postTags, function (obj) {
    obj.id = obj.id || obj.tag_id;
    obj.text = obj.text || obj.tag_title;
    return obj;
});

$('[id^="meta_keywords"]').select2({
    dir: "rtl",
    tags: true,
    initSelection: function (element, callback) {
        callback(postTag);
    },
    data: allTags
});

这是一个 JsFiddle 示例：

See On JsFiddle

Answer 1

Multi-select 当点击之前 selected 的项目时将删除select 它。不需要 initSelection 代码，您可以在数据部分

中预先select编辑它们

http://jsfiddle.net/ncjo6bz1/

var allTags = [{
    "tag_id": 1,
        "tag_title": "Laravel",
}, {
    "tag_id": 3,
        "tag_title": "jQuery",
    selected: true
}, {
    "tag_id": 4,
        "tag_title": "HTML",
    selected: true
}];

var allTags = $.map(allTags, function (obj) {
    obj.id = obj.id || obj.tag_id;
    obj.text = obj.text || obj.tag_title;
    obj.selected = obj.selected || false;

    return obj;
});

$('[id^="meta_keywords"]').select2({
    dir: "rtl",
    tags: true,
    data: allTags

});

我找不到更好的方法，但如果您想从下拉列表中隐藏已经 select 的项目，一些 CSS 可以做到这一点

li.select2-results__option[aria-selected='true'] {
    display: none;
}

http://jsfiddle.net/ncjo6bz1/2/

select2 jquery 插件重置 select 具有预 select 项的元素

select2 jquery plugin resets select element that have pre selected Items

javascript

jquery

jquery-select2