Как отобразить изображение в выпадающем списке select2 с группой параметров?
Я работаю в 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>
Посмотреть файл 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()
}
});
');
Как создать вариант группы из приведенного выше кода? А также в раскрывающемся списке выводит имя, а не значение (из-за этой строки -> map(Targetfish::find()->all(),'id','image')). Могу ли я взять имя и изображение?
Решение
В Select2 встроена поддержка AJAX с использованием методов AJAX jQuery. это поможет вам отобразить изображение с вашим требованием.
Вы можете проверить больше по ссылке ниже.
Другие решения
<script>
function fmtState (state) {
if (!state.id) { return state.text; }
var $state = $(
'<span>'+
'<img src="https://web-answers.ru/wp-content/uploads/2019/02/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>