如何从分组选项select2中删除重复标签？

Question

我有 2 个带有重复标签的分组选项。

选择后，每个组中的标签会出现两次。

如何避免重复输入？

我准备了一个jsFiddle来演示这个问题。 https://jsfiddle.net/PBrockmann/cvg4h98b/

var tagsCat1 = [
  "AAA",
  "BBB",
  "CCC"
];

var childrenCat1 = [];
for (var i = 0; i < tagsCat1.length; i++) {
  childrenCat1.push({
    id: tagsCat1[i],
    text: tagsCat1[i]
  });
}

var tagsCat2 = [
  "DDD",
  "EEE",
  "BBB" // duplicate tag 
];

var childrenCat2 = [];
for (var i = 0; i < tagsCat2.length; i++) {
  childrenCat2.push({
    id: tagsCat2[i],
    text: tagsCat2[i]
  });
}

var options = [];
options.push({
  text: "Cat1",
  children: childrenCat1
});
options.push({
  text: "Cat2",
  children: childrenCat2
});

$('#example1').select2({
  data: options,
  tags: true,
  multiple: true,
  allowClear: true,
  placeholder: 'select...',
});

选择标签“BBB”。将显示2次。

Answer 1

感谢 cmgchess 提出了一种解决方法，即在选项之前添加组名称。

var tagsCat1 = [
  "AAA",
  "BBB",
  "CCC"
];

var childrenCat1 = [];
for (var i = 0; i < tagsCat1.length; i++) {
  childrenCat1.push({
    id: "Cat1: " + tagsCat1[i],
    text: "Cat1: " + tagsCat1[i]
  });
}

var tagsCat2 = [
  "DDD",
  "EEE",
  "BBB"     // duplicate tag 
];

var childrenCat2 = [];
for (var i = 0; i < tagsCat2.length; i++) {
  childrenCat2.push({
    id: "Cat2: " + tagsCat2[i],
    text: "Cat2: " + tagsCat2[i]
  });
}

var options = [];
options.push({text: "Cat1", children: childrenCat1});
options.push({text: "Cat2", children: childrenCat2});

$('#example1').select2({
  data: options,
  tags: true,
  multiple: true,
  allowClear: true,
  placeholder: 'select...',
});