如何使用選項組在select2下拉菜單中顯示圖像？

Question

我在yii2工作。我有一種形式。在那我有一個下拉。我需要顯示帶有選項組的名稱和圖像的所有下拉選項。

顯示圖像和名稱。但是如何用選項組顯示所有選項。

查看文件：

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

如何從上面的代碼創建選項組？並且在下拉值中，它打印imgae名稱不是值（因爲此行 - >map(Targetfish::find()->all(),'id','image')）。我可以帶身份證號碼和圖像嗎？

Answer 1

Select2自帶AJAX支持，使用jQuery的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>