オプショングループを使用してselect2ドロップダウンに画像を表示する方法は？

Question

私はyii2で働いています。私は1つのフォームを持っています。その中で私は1つのドロップダウンを持っています。私は、オプショングループを持つ名前と画像ですべてのドロップダウンオプションを表示する必要があります。

画像と名前が表示されています。しかし、オプショングループですべてのオプションを表示する方法。

ビューファイル：

<div class="col-xs-6 col-md-5"> 
     <?= $form->field($model,'targetfish_id')->dropDownList(ArrayHelper::map(Targetfish::find()->all(),'id','image'), 
      ['multiple'=>'multiple']) ?> 
    </div> 

表示ファイル・スクリプト：

<?php 
$this->registerJs(' 
    function formatState (fish) { 
     if (!fish.id) { return fish.text; } 
     var $fish = $(
     "<span><img src=/www/target_fish_pic/"+fish.text+ " class=img-flag style=width:50px />"+ fish.text +"</span>" 
    ); 
     return $fish; 
    }; 

    $("#boatinformation-targetfish_id").select2({ 
     placeholder: "Select Targeted Fish", 
     templateResult: formatState, 
     templateSelection: formatState, 
    }); 

$(document).ready(function(){ 
    $("#boatinformation-in_water_slip").change(); 
}); 
$("#boatinformation-in_water_slip").on("change",function(){ 
    if($(this).val()==="0"){ 
     $(".slip_controls").hide() 
     $(".guest_controls").show() 
    } 
    else{ 
     $(".slip_controls").show() 
     $(".guest_controls").hide() 
    } 
}); 
'); 

コード上からオプショングループを作成する方法は？またドロップダウン値では、値ではない画像名を印刷しています（この行のため - >map(Targetfish::find()->all(),'id','image')）。私はIDの名前と画像を取ることができますか？

Answer 1

Select2には、jQueryのAJAXメソッドを使用してAJAXサポートが組み込まれています。それはあなたの要件と画像を表示するのに役立ちます。

以下のリンクで詳細を確認できます。

https://select2.github.io/examples.html#data-ajax

Answer 2

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

<div class="input-control" data-template-result="fmtState" data-role="select"> 
 
    <select> 
 
     <option>option</option> 
 
     ... 
 
     <option>option</option> 
 
    </select> 
 
</div>