select2 jquery插件重置具有预选项目的选择元素

Posted 2023-05-07

【中文标题】select2 jquery插件重置具有预选项目的选择元素

【英文标题】：select2 jquery plugin resets select element that have pre selected Items

【发布时间】：2016-02-20 07:27:10

【问题描述】：

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

我通过两个 json 格式化变量调用选择项和预选项，并使用 initSelection 选项设置预选项。

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

我该如何解决这个问题？

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

【问题讨论】：

看起来正在发生的事情是您预先选择了“HTML”、“jQuery”，但下拉列表没有反映这一点。单击已选择的项目，它会被打开/关闭。单击“Laravel”会将其添加到选定的选项中，并且不会删除其他任何内容

【参考方案1】：

单击先前选择的项目时的多选将取消选择它。 initSelection 代码不是必需的，您可以在数据部分预先选择它们

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

);

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

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

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