Question

好吧，我正在尝试将select2的标记和AJAX功能结合起来用于我的类别选择。

目前，用户可以搜索要添加到其帖子的类别。我注意到的一件好事是，select2不允许你选择相同的选择两次（它是灰色的，点击它时没有任何反应）。

这是我的挑战......让我们说用户正在编辑帖子并且已经选择了类别。这些类别显示在select2搜索下方。例如，假设用户选择了“Life”类别。这将在下面已经检查过。

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

那么如何设置已经选中的传入AJAX结果，以便不能再次选择它们？

这是一个小提琴。注意搜索它时“经验”是如何变灰的，但即使已经选择了“生命”，它仍然是“生命”。

 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元素设置为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>

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

1 个答案: