Select2 带有“all”选项（ajax 查询）答案

【问题标题】：Select2 with "all" option (ajax query)Select2 带有“all”选项（ajax 查询）
【发布时间】：2018-05-27 05:02:10
【问题描述】：

我有一个列表框：

<asp:ListBox ID="ListBoxCodeProduct"
    [...]
    CssClass="SelectProducts select2-selected-options"
    SelectionMode="Multiple">
</asp:ListBox>

我的select2使用ajax获取ListBox中的数据。

$(document).ready(function () {
    $('.SelectProducts').select2({
        placeholder: 'Choose product(s)',
        allowClear: true,
        ajax: {
            url: "../Product.ashx",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                [...]
                };
                return params;
            },
            processResults: function (data, params) {
                [...]
                };
            },
            cache: false
        },
        minimumInputLength: 0
    });
});

我想在我的列表框中添加一个“所有产品”选项（例如带有复选框）以允许所有选项。

我找到了很多解决方案，但总是使用 html 中的数据（使用“li”和“option”，但从不使用 ajax）我想做这样的事情：

$("#CheckBoxAllProducts").click(function(){
    if($("#CheckBoxAllProducts").is(':checked') ){
        $(".SelectProducts'> li").prop("selected","selected");
        $(".SelectProducts'").trigger("change");
    }else{
        $(".SelectProducts'> li").removeAttr("selected");
        $(".SelectProducts'").trigger("change");
    }
});

我是怎么做到的？提前致谢

【问题讨论】：

数据来自 AJAX 的事实应该没有什么区别。从以前的类似问题中尝试这个答案：stackoverflow.com/a/16543623/519413
当你点击#CheckBoxAllProducts时，元素将出现在DOM中。

标签： jquery ajax webforms jquery-select2

【解决方案1】：

感谢您的回答，我已经看到了这个话题。但是是的，它不同，因为我的 DOM 不包含我的结果列表。

但是有人帮助我：（我们在点击复选框时开始声明我的产品列表）

 $("#CheckBoxAllProducts").click(function (e) {
        $.ajax({
            url: "../Product.ashx",
            type: 'POST',
            data: { taillePage: 100 },
            dataType: 'json',
            cache: false
        }).done(function (data) {
            var select2 = $('.SelectProducts'),
                selectedValues = [];
            select2.empty();
            $.each(data.items, function (i, item) {
                select2.append($('<option>', {
                    value: item.id,
                    text: item.text
                }));
                selectedValues.push(item.id);
            });
            select2.val(selectedValues).trigger('change');
        });
    });

它现在正在工作！ :) 谢谢

【讨论】：