Question

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

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

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

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

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

你能告诉我如何解决这个最小的例子（fiddle）来解决这个问题吗？

A similar question exists但尚未得到回答，并且没有最小的例子。

ADD：根据{{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

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

在您的情况下，您可以使用container templateSelection函数的templateSelection: function (data, container) { $(container).css("background-color", colors[data.id]); return data.text; }参数进行操作：

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>

select2:select

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

更新

以下是基于在选择中的位置为所选标签着色的完整代码段。

在下面的代码中，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插件对选择进行排序，以便标记按照选择顺序显示：

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

Handles Me.UnhandledException, MyBase.UnhandledException, MyClass.UnhandledException

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

参考：

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/

修改
为了帮助您在评论中发布的问题，我创造了一个新的小提琴。 https://jsfiddle.net/bdotckdu/

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

select2 - 基于选择顺序

2 个答案:

更新