Wie wird das Bild in der Dropdown-Liste select2 mit Optionsgruppe angezeigt?

Question

Ich arbeite in yii2. Ich habe eine Form. Da habe ich ein Dropdown. Ich muss alle Dropdown-Option mit Name und Bild mit Optionsgruppe anzeigen.

Bilder und Name werden angezeigt. Aber wie man alle Optionen mit Optionsgruppe anzeigt.

View file:

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

View File Script:

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

Wie von oben Code Optionsgruppe erstellen? Und auch im Dropdown-Wert wird der Name des Imgae nicht gedruckt (wegen dieser Zeile ->). Darf ich ID Name und Bild nehmen?

Answer 1

Select2 ist mit AJAX-Unterstützung ausgestattet und verwendet jQuerys AJAX-Methoden. das wird Ihnen helfen, Bild mit Ihrer Anforderung anzuzeigen.

Sie können mehr unter folgendem Link überprüfen.

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>