我想要复制的例子是: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调用加载它们 . 有没有人知道如何解决这个问题?