select2 - 基于选择顺序的颜色标签

Question

我有一个下拉选择输入（使用 select2 插件构建），我的目标是每个选定的标签都采用一种颜色，以提高可读性。例如，第一个 selected 标记为蓝色，第二个标记为红色，以此类推。

我没能做到，至少有两个原因：

• 如何访问（DOM 操作）选定的标签？我可以访问 select elmt 的子项并检查它们是否被选中（使用 data-select2-id ？顺便说一句，这个是如何工作的，我无法解释自己在下面的示例中采用的值），但是因为我有 10000+ 种可能性，预计会有 2 个或 3 个选择，这似乎是一种次优方法。

• 如何指定它们的颜色？

我阅读了here，如何更改输入的背景颜色，但这根本不是我想要做的。

事实上，我需要标签呈现特定颜色，以便用户可以将其映射到图表中相应的彩色条目。

你能告诉我如何修复这个最小的例子 (fiddle) 吗？

一个similar question exists，但没有得到答复，也没有最小的例子。

添加： 根据that thread，解决方案可能是为每个可能的选项赋予颜色，如下所示。但由于我有很多可能的选择，这并没有真正做到..

option.line1 {
    background-color: #000000;
    color: #ffffff;
}

option.line2 {
    background-color: #000000;
    color: #ffff00;
}


<option class="line1" value="menu1">Menu Item 1</option>

Answer 1

我建议使用selection templating，因此您可以使用templateSelection 配置选项自定义所选结果的外观。

在您的情况下，您可以对templateSelection 函数的container 参数进行操作，如下所示：

templateSelection: function (data, container) {
    $(container).css("background-color", colors[data.id]);
    return data.text;
}

这是一个完整的 sn-p 根据 id 为选定标签着色：

var colors = ["red", "blue", "green", "orange", "yellow"];

$(document).ready(function() {
  var checkList = [1, 3];
  $("#myList").select2({
  	width: "100%",
    templateSelection: function (data, container) {
      $(container).css("background-color", colors[data.id]);
      return data.text;
    },
  }).val(checkList).trigger("change");
})

.select2-selection__choice {
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<div class="container">
  <select multiple="multiple" id="myList">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
    <option value="3">Orange</option>
  </select>
</div>

或者你的小提琴更新了：https://jsfiddle.net/beaver71/n9todvv8/

---

更新：

下面是一个完整的 sn-p 根据它们在选择中的位置为选定标签着色。

在下面的代码中，select2:select 事件处理程序阻止 Select2 插件对选择进行排序，以便标签按照它们被选中的顺序显示：

var colors = ["red", "blue", "green", "orange", "yellow"];

$(document).ready(function() {
  var checkList = [1, 3];
  $("#myList").select2({
  	width: "100%",
    templateSelection: function (data, container) {
      var selection = $('#myList').select2('data');
      var idx = selection.indexOf(data);
      console.log(">>Selection",data.text, data.idx, idx);
      data.idx = idx;
      
      $(container).css("background-color", colors[data.idx]);
      return data.text;
    },
  }).val(checkList).trigger("change");

  
  $("#myList").on("select2:select", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
  });
  
})

.select2-selection__choice {
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<div class="container">
  <select multiple="multiple" id="myList">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
    <option value="3">Orange</option>
    <option value="4">Banana</option>
    <option value="5">Kiwi</option>
  </select>
</div>

新小提琴：https://jsfiddle.net/beaver71/phabypbt/

---

参考：

• Select2 issue: In multi-select, selections do not appear in the order in which they were selected
• Select2: How to prevent tags sorting

Answer 2

这可以是一个解决方案，也可以是您的起点，请看一下，这里我选择了所有选项，并使用循环我使用 select2 id 为其设置颜色：

    var colors = ["red", "blue", "green", "cyan", "orange", "aliceblue", "purple"]; 
    //random colors that i created

    var selections = $(".select2-selection__choice");
    //this above will return all selections

    if (selections.length){
       for (var i = 0; i < selections.length; i++){
            var selection = selections[i];
            var selectionJQ = $(selection);
            var select2ID = selectionJQ[0].dataset.select2Id;   //here you can get some infos from select2  
            colorName   = colors[select2ID];

            selectionJQ.attr("style", "background: " + colorName + " !important");
        }
    }

这里有一个小提琴，看看是否是你需要的：https://jsfiddle.net/nw0rd0dk/

编辑
为了帮助解决您在 cmets 中发布的问题，我创建了一个新小提琴。 https://jsfiddle.net/bdotckdu/

1）我发现的更简单的方法是用一个 div 封装每个选择，然后从单个 div 内的选择中找到子选择（小提琴将有助于理解）
2）它可以工作，你在小提琴中有一个错误导致它无法工作，我修复了它。