select2マルチセレクトでダイナミックカラーブロックを追加 - Laravel 5.2

Question

私のデータベースに16進数のカラーコードを保存します。値を選択するときや値が選択されている場合

は、それが動作するはずです：どのような私が達成したいことは、この（類似したか何か）です。

は通常複数選択では私はこのような何かを行うことができます：

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

しかし、Selectセレクト使用して - プラグインは、スタイルが上書きされます。私はまた、次のように選択オプションの中にspanまたはdivを追加しようとしました：

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

これも上書きされます。

セレクト2バージョン私はドキュメントのthis exampleを見つけましたが、私は

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 
}); 

laravelで使用するためにそれを適応させる方法が本当にわからない：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で選択を移入することができますサンプル。