如何将图像+代码从数据库Laravel 5.7加载到下拉列表中

Question

我想从数据库中填充存储的图像以填充下拉列表 图像位于airline_images文件夹中 图像路径存储在数据库中 我希望用户在单击航空公司下拉菜单时，它将显示存储的Airliens及其图像

这是刀片代码：

<div class="form-group col-md-2">
<label>@lang('site.airline')</label>
<select class="form-control select2 status-type" style="width: 100%;"
name="airline"
id="airline">
@foreach ($airlines as $airline)
<option value="{{ $airline->code }}">{{ $airline->name }} <img src="{{ $airline->image_path }}" style="width: 100px" class="img-thumbnail" alt="">
</option>
@endforeach
</select>
</div>

Answer 1

你可以考虑使用第三方jQuery库，如ddSlick

用法

$('select#airline').ddslick({
data: ddData,
width: '100%',
imagePosition: "left",
selectText: "Select your favorite airline",
onSelected: function (data) {
console.log(data);
}
});

PS ：插件需要特定的数据格式

var ddData = [
{
text: "Tunisair",
value: 1,
selected: false,
description: "Description goes here",
imageSrc: "http://path_to_img"
},
{
text: "Turkish airlines",
value: 2,
selected: true,
description: "Description goes here",
imageSrc: "http://path_to_img"
},
{
text: "Lufthansa",
value: 3,
selected: false,
description: "Description goes here",
imageSrc: "http://path_to_img"
},
//...
];