选择新值时正在替换 select2 初始值

Question

下面是我的Select2 框代码。我需要已经分配给记录的值（标签）才能最初显示，这由 AAA 和 BBB 值表示。然后，如果他们想将新值（标签）添加到已经存在的值中，我需要在值列表中进行 ajax 选择。一切正常，除了当他们选择一个新值（标签）来添加它替换现有值时，它们就会消失。我需要他们留下来。

<select class="myTags" style="width:100%" multiple="multiple"></select>
<script>
    function formatResults(item) {
        if (item.loading) return 'Loading...';
        return '<div style="font-size:100%;">'+
                    '<div style="padding:5px;">'+
                        '<span style="background-color:##e4e4e4; color:##000000; border:1px solid ##aaa; padding:5px;">'+
                            item.tag+
                        '</span>'+
                        '<span style="padding:5px;">'+
                            '&nbsp;&nbsp;x&nbsp;&nbsp;'+item.popularity+
                        '</span>'+
                        '<p style="margin-bottom:0px;">'+
                        item.description+
                        '</p>'+
                    '</div>'+
                '</div>';
    }

    function formatSelection(item) {
        return item.tag;
    }

    jQuery(".myTags").select2({
        placeholder: "add a tag, max 20 tags",
        maximumSelectionLength: 20,
        minimumInputLength: 2,
        templateResult: formatResults,
        templateSelection: formatSelection,
        initSelection: function (element, callback) {
            var data = [{ "tag": "AAA", "id": "111" },{ "tag": "BBB", "id": "222" }];
            callback(data);
        },
        escapeMarkup: function (markup) { return markup; }, // let select2's custom formatter work
        ajax: {
            url: "tags.cfc?method=json_get_valtags",
            dataType: 'json',
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: jQuery.map(data, function (item) {
                        return {
                            id: item.UNID,
                            tag: item.TAG,
                            description: item.DESCRIPTION,
                            popularity: item.POPULARITY
                        }
                    })
                };
            }
        }
    });
</script>

Answer 1

我想通了。 This SO post was very similar to what I needed but I had to tweak it some for my specific scenario.

(1) 我必须添加 select2 data 选项...

data: [{ "tag": "AAA", "id": "112233" },{ "tag": "BBB", "id": "11223344" }],

(2) 然后我从选项中删除了整个initSelection 函数。

(3) 然后我在select2初始化后在底部添加了这个...

jQuery(".myTags").val([112233,11223344]).trigger('change');

所以这就是最终结果...

jQuery(".myTags").select2({
    data: [{ "tag": "aaa", "id": "112233" },{ "tag": "bbb", "id": "11223344" }],
    placeholder: "add a tag, max 20 tags",
    maximumSelectionLength: 20,
    minimumInputLength: 2,
    templateResult: formatResults,
    templateSelection: formatSelection,
    escapeMarkup: function (markup) { return markup; }, // let select2's custom formatter work
    ajax: {
        url: "tags.cfc?method=json_get_valtags",
        dataType: 'json',
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data) {
            return {
                results: jQuery.map(data, function (item) {
                    return {
                        id: item.UNID,
                        tag: item.TAG,
                        description: item.DESCRIPTION,
                        popularity: item.POPULARITY
                    }
                })
            };
        }
    }
});

jQuery(".cmprotags").val([112233,11223344]).trigger('change');