如何使用选项组在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>