Добавить динамический цветной блок в select2 multi-select - Laravel 5.2

Question

Я хранил Hex colorcodes в моей базе данных. Что я хотел бы достичь это (или нечто подобное):

Он должен работать при выборе значения и при выборе значения.

В нормальном множественный я могу сделать что-то вроде этого:

<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 - плагин, стили перезаписываются. Я также попытался добавить диапазон или 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 так же, как вы делали в вашем коде образец.