如何在select2中将搜索结果设置为预选？

Question

好的，所以我正在尝试结合使用 select2 的标记和 AJAX 功能来进行类别选择。

目前，用户可以搜索类别以添加到他们的帖子中。我注意到的一件好事是，select2 不会让您选择相同的选择两次（它是灰色的，当您单击它时没有任何反应）。

这是我的挑战...假设用户正在编辑帖子并且已经选择了类别。这些类别出现在 select2 搜索下方。例如，假设用户选择了“生活”类别。这将出现在下面已经被选中。

但是，当用户搜索“生活”时，问题就出现了。他们将能够选择它并再次添加它。我可以只解析之前的选择并否定选择，但为了保持一致性，我真的很想使用 select2 的内置功能。

那么如何将传入的 AJAX 结果设置为已经被选中，从而不能再次被选中？

这是一个小提琴。请注意，当您搜索“体验”时，它是灰显的，但“生活”却不是，即使它已经被选中。

http://jsfiddle.net/odLnznct/1/

 function formatStuff(stuff) {
    if (stuff.loading) return 'Searching...';

    markup = "<p>" + stuff.text + "</p>";

    return markup;
}

function formatRepoSelection(stuff) {
    return stuff.cat_name || $('.js-select').val();
}

function catAdd() {
    var addCat = div = clo = label = labelText = null;

    cat = $('.js-select').select2('data');

    addCat = cat[0].text;

    div = $('#categories-cat_name div.checkbox:first');
    clo = div.clone();
    $('input[type="checkbox"]', clo).val(addCat);

    label = $('label', clo);
    labelText = label[0].childNodes[label[0].childNodes.length - 1];
    labelText.textContent = addCat;

    $(div).before(clo);
}


$('.js-select').select2({
    tags: true,
    ajax: {
        url: 'https://api.myjson.com/bins/58uwe',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data, page) {

            var select2Data = $.map(data, function (obj) {

                obj.id = obj.cat_id;
                obj.text = obj.cat_name;

                return obj;
            });

            return {
                results: select2Data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    minimumInputLength: 1,
    templateResult: formatStuff,
    templateSelection: formatRepoSelection
});

$('.js-select').on('select2:select', function () {
    catAdd();
});

Answer 1

你可以试试这个。

由于您的结果可能是多个，因此您需要将 select 元素的 multiple 设置为 true 以启用它，并将所选选项添加为默认值。

你可以用 javascript 或 html 来做。

<div id='select-test'>
    <select class="js-select" style="width:90%;" multiple=true>
        <option value="Life" selected=true>Life</option>
        <option value="Joy" selected=true>Joy</option>
    </select>
</div>