我将十六进制颜色代码存储在我的数据库中。我想实现的是这个(或类似的东西):
它应该在选择值和选择值时起作用。
在普通的多选中我可以做这样的事情:
<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
最佳答案
这应该不是问题。只需使用正确的类来设置下拉菜单的样式,并像您所说的那样使用模板函数即可。
这是一个关于如何操作的快速演示:
<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 填充选择。
关于javascript - 在 select2 多选中添加动态色 block - Laravel 5.2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36548888/