带有使用远程数据的图像的语义ui下拉项

Question

我在填充下拉列表时遇到问题

下面的代码工作正常

<div class="ui multiple search selection dropdown" 
        style="width: 100%;" 
        id="list_id" >
    <input name="name" type="hidden">
    <i class="dropdown icon"></i>
    <div class="default text">Lists</div>
    <div class="menu">
          <div class="item" data-value="{{value.value}}">
        <img class="ui avatar image" src="{{value.img}}">{{value.label}}</div>
    </div>
</div>

但不知道如何使用远程数据执行相同的操作我已经尝试过apiSettings.onResponse等方法，但不确定返回数据的格式。我还使用successTest确认了响应与我正在调整的相同，并且也调用了onSuccess。但是，下拉菜单中没有任何内容。

Answer 1

我有同样的问题，这是我解决的方法：

let dropdownValues = [];

types.forEach(type =>{ //populating dropdownValues
    let value = {};
    value.value = type;
    value.name = `<image class="ui mini image" src="/resources/${type}.png" />${type}`
    dropdownValues.push(value);
  })

$('.ui.dropdown').dropdown({
    values: dropdownValues
})

正如您所看到的，它像您打算的那样工作：result