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

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

1 个答案: