代码之家  ›  专栏  ›  技术社区  ›  PBrockmann

如何从分组选项select2中删除重复标记?

  •  0
  • PBrockmann  · 技术社区  · 2 年前

    我有两个带有重复标记的分组选项。

    enter image description here

    选中后,每个组中的标记将显示两次。

    如何避免重复输入?

    我已经准备了一个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次。

    0 回复  |  直到 2 年前
        1
  •  1
  •   PBrockmann    2 年前

    感谢cmgches提出了一个解决方案,在选项中添加组名。

    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]   // could be just 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]   // could be just 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...',
    });