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

Question

我有一个下拉选择输入（使用select2插件构建），我的目标是每个选择的标签都采用color，以提高可读性。例如，第一个选择的标签将是蓝色，第二个将是红色等。

我没有做到这一点，至少有两个原因：

• 如何访问（DOM操作）所选标签？我可以访问select elmt的子级并检查它们是否被选中（使用data-select2-id？这是如何工作的，我不能在下面的示例中解释自己的值），但是由于我有10000+种可能性并且期望2 或3个选择，这似乎是次优的方法。

• 如何指定颜色？

我在这里阅读了如何更改输入的背景色，但这根本不是我要尝试做的。

实际上，我需要标记采用特定的颜色，以便用户可以将其映射到图表中对应的彩色条目。

您能告诉我如何解决这个最小的例子（小提琴）吗？

一个类似的问题存在，却一直没有得到答复，且无最小的例子。

添加：根据该线程，解决方案可能是为每种可能的选项赋予颜色，如下所示。但是由于我有很多可能的选择，所以实际上并没有。

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

我建议使用选择模板，以便您可以使用templateSelection配置选项来自定义所选结果的外观。

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

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

这是一个完整的代码段，基于它们为选定的标签着色id：

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

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;
}

或您的小提琴已更新：https：//jsfiddle.net/beaver71/n9todvv8/

更新：

以下是一个完整的代码段，这些代码段根据所选标签在选择中的位置为它们着色。

在下面的代码中，select2:select事件处理程序阻止Select2插件对选择进行排序，从而使标记按其选择顺序显示：

<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>

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;
}

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

参考：

• Select2问题：在多选中，选择内容未按选择顺序显示
• Select2：如何防止标签排序