Хорошо, я придумал решение, которое вы, вероятно, сможете адаптировать. Optgroups не фигурируют, но должны работать в любом случае.
HTML:
<select multiple style="width: 300px">
<option groupid="a" value="A_AK">Alaska</option>
<option groupId="b" value="B_HI">Hawaii</option>
<option groupid="c" value="C_CA">California</option>
<option groupid="a" value="D_NV">Nevada</option>
<option groupid="b" value="A_OR">Oregon</option>
<option groupid="c" value="B_WA">Washington</option>
<option groupid="a" value="C_AZ">Arizona</option>
<option groupid="b" value="D_CO">Colorado</option>
<option groupid="c"value="A_ID">Idaho</option>
<option groupid="a" value="B_MT">Montana</option>
<option groupid="b" value="C_NE">Nebraska</option>
<option groupid="c" value="D_NM">New Mexico</option>
<option groupid="a" value="A_ND">North Dakota</option>
<option groupid="b"value="B_UT">Utah</option>
<option groupid="c" value="C_WY">Wyoming</option>
</select>
Вы заметите, что я добавил атрибут идентификатор группы. Это используется для установления взаимосвязи между опциями.
JavaScript:
$(function() {
$('select').select2({
allowClear: true,
placeholder: "Pick a State"
});
//Select2 Event handler for selecting an item
$('select').on("select2:selecting", function(evt, f, g) {
disableSel2Group(evt, this, true);
});
// Select2 Event handler for unselecting an item
$('select').on("select2:unselecting", function(evt) {
disableSel2Group(evt, this, false);
});
});
// At some point during the select2 instantation it created the
// data object it needs with the source select option.
// This function, called by the events above to set the current status for the
// group for which the selected option belongs.
function disableSel2Group(evt, target, disabled) {
// Found a note in the Select2 formums on how to get the item to be selected
var selId = evt.params.args.data.id;
var group = $("option[value='" + selId + "']").attr("groupid");
var aaList = $("option", target);
$.each(aaList, function(idx, item) {
var data = $(item).data("data");
var itemGroupId = $("option[value='" + data.id + "']").attr("groupid");
if (itemGroupId == group && data.id != selId) {
data.disabled = disabled;
}
})
}
Пробовали ли вы написать что-то самостоятельно? Добавьте код. – Dekel
Думаю, для этого нужно написать собственный код, а не 'Select2', имеющий свой собственный вариант. И обратите внимание, что вы повторяете значения. –
Поиск ... Поиск ... Поиск ... –