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

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

jquery-select2 css html javascript

hartmut · 技术社区 · 6 年前

我有一个下拉选择输入(使用select2插件构建),和 我的目标是,每个选定的标记都采用一种颜色 ,以提高可读性。例如, 第一个 挑选出来的 标签为蓝色,第二个为红色等 .

我没有做到这一点,至少有两个原因:

如何访问(DOM操作)所选标记?我可以访问select elmt的子级并检查它们是否被选中(使用 data-select2-id ? 顺便说一句,我无法解释下例中的值),但由于我 10000多个可能性 期望2 或3个选项 这似乎是一种次优的方法。
如何指定其颜色?

我读过 here ,如何更改输入的背景色,但这根本不是我要做的。

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

你能告诉我如何修复这个最小的示例吗( fiddle )要这个吗?

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

2 回复 | 直到 6 年前

beaver 6 年前

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

在你的情况下,你可以在 container 的参数 模板选择 功能如下:

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>

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

更新:

下面是一个完整的代码片段,根据其 选择中的位置 .

在下面的代码中 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");
  });
  
})

.选择2-selection\uu选项{
颜色:白色;
}

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

参考号:

Calvin Nunes 6 年前

这可以是一个解决方案,也可以是您的起点,请看一看,这里我选择了所有选项,并使用循环我使用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封装每个select,然后从单个div中的select中只找到子选项(fiddle将有助于理解)
2) 它起作用了,你的小提琴有一个错误,导致它不起作用,我把它修好了。