我想要复制的例子是:https://jsfiddle.net/bindrid/hpkqxto6/ . 我需要从服务器加载数据,形成一组数据,当从一个组中选择一个项目时,该特定组内的所有其他项目都将被禁用 . 不同之处在于我必须使用select2中的ajax调用从服务器加载数据,而不是在select元素中列出<option>元素并以这种方式形成分组 . 我无法在javascript操作期间选择下拉列表中的所有可用项目以禁用来自同一组的项目(上面示例中的第29行因html中没有<option>元素而失败,而我认为它们已加载以后和javascript无法找到它们) .

html部分如下所示:

<select class="form-control attributoSelect2" name="attributiSelezionati" id="attributoSelect2" value="@Model.AttributiSelezionati"></select>

<select>中没有<option>项,因为ajax调用负责填充列表,如下所示:

$('.attributoSelect2').select2({
        placeholder: "Cerca Attributo",
        multiple: true,
        allowClear: true,
        minimumInputLength: 0,
        ajax: {
            dataType: 'json',
            delay: 150,
            url: "@Url.Action(MVC.Configurazione.Attributi.CercaAttributi())",
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(function (item) {
                        return {
                            id: item.Id,
                            text: item.Descrizione,
                            children: item.Children.map(function (itemC) {
                                return {
                                    id: itemC.Id,
                                    groupid: itemC.GroupId,
                                    text: itemC.Descrizione,
                                };
                            })
                        };
                    })
                };
            }
        }
    });

最后我的javascript看起来如下:

$('.attributoSelect2').on("select2:selecting", function (evt, f, g) {
        disableSel2Group(evt, this, true);
    });

    $('.attributoSelect2').on("select2:unselecting", function (evt) {
        disableSel2Group(evt, this, false);
    });



    function disableSel2Group(evt, target, disabled) {
        var selId = evt.params.args.data.id;
        var group = evt.params.args.data.groupid;

        var aaList = $(".attributoSelect2 option");

        $.each(aaList, function (idx, item) {
            var data = $(item).data("data");

            var itemGroupId = data.groupid;
            if (itemGroupId == group && data.id != selId) {
                data.disabled = disabled;
            }
        })
    }

问题是这一行:

var aaList = $(".attributoSelect2 option");

不加载所有选项元素,因为它们尚未加载 . 稍后将使用ajax调用加载它们 . 有没有人知道如何解决这个问题?