Javascript 在表单中的选择中使用图像的最佳实践

我被困在表单中，我想知道如何在选择选项中显示图像

输入将加载文本

我想做的是

在表单中执行此操作的最佳方法是什么

这就是我所做的

所以我的代码是这样的，因为

不起作用

切换下拉列表
@foreach（$categories作为$category）
@endforeach

这方面的最佳做法是什么？

---

（使用bootstrap 4和laravel btw）

由于使用本机

HTML

元素不可能做到这一点，因此如果没有

Javascript

，它就无法工作。因此，您至少需要一个隐藏的输入字段（

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="btn-group">
      <button type="button" class="no-border btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div class="dropdown-menu " aria-labelledby="dropdownMenuReference" style="position: absolute;transform: translate3d(-352px, 35px, 0px);min-width: 380px;overflow-x: hidden;" x-placement="bottom-start">
         @foreach($categories as $category)
        <a class="dropdown-item" href="#"><img class="rounded" src="/storage/category-icon/{{$category->business_icon}}">{{$category->business_name}}</a>
        @endforeach
      </div>
    </div>
</div>

[
  {
    "label": "Click ME",
    "icon": "/img/icon.png",
    "value": "item-xxx"
  },
  …
]

<select name="foo-bar-baz">
 <option value="value" data-icon="/path/to/icon">Label</option>
</select>