javascript - 在 select2 多选中添加动态色 block - Laravel 5.2

Question

我将十六进制颜色代码存储在我的数据库中。我想实现的是这个(或类似的东西):

它应该在选择值和选择值时起作用。

在普通的多选中我可以做这样的事情:

<div class="col-sm-10">
<select id="colors" name="colors[]" multiple class="form-control">
  @foreach($colors as $key => $color)
    <option value="{{$key}}" style="background-color:{{$color->code}}"></option>
  @endforeach
 </select>
</div>

但是当使用 Select2 - 插件时，样式会被覆盖。我还尝试在选择选项中添加一个 span 或 div，如下所示:

<option value="{{$key}}"><span style="background-color:{{$color->code}}"></span>{{$color->code}}</option>

但这也会被覆盖。

我找到了 this example在文档中，但我不太确定如何调整它以与 laravel 一起使用

function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
    '<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});

选择2个版本:4.0.2

Answer 1

这应该不是问题。只需使用正确的类来设置下拉菜单的样式，并像您所说的那样使用模板函数即可。

这是一个关于如何操作的快速演示:

<select>
  <option>#232342</option>
  <option>#ffd800</option>
  <option>#ff1200</option>
</select>

<script type="text/javascript">
$(document).ready(function() {
  function formatColor (state) {
    if (!state.id) { return state.text; }
    var $state = $(
      '<span style="background-color: ' + state.text + '" class="color-label"></span><span>Color ' + state.text + '</span>'
    );
    return $state;
  };


  $('select').select2({
    width: "300px",
    templateResult: formatColor,
    templateSelection: formatColor
  });  
});
</script>

https://plnkr.co/edit/Btjj5IrE9C4G7UO0mdRY?p=preview

在示例中，我使用了静态选择，但您可以像在代码示例中那样使用 Laravel 填充选择。