javascript - 使用 JQuery 的语义 UI 下拉列表 - 如何使用 JQuery 初始化语义 UI 下拉列表

Question

我有一个像这样的数组

var resultsArray = [ { name: "BMW", value: "BMW", text: "BMW" }, { name: "Mercedes-Benz", value: "Mercedes-Benz", text: "Mercedes-Benz" } ... ];

然后在我的 JavaScript 中，我尝试使用上面的数组初始化下拉列表。

 $('.select-car-model').dropdown({
                               source: resultsArray
                               });

但是，该数组并未填充数据。我在这里缺少什么？

编辑:这是 HTML

<select name="cars" class="ui search selection dropdown select-car-model" multiple="" id="car-multiselect">

Answer 1

除非您从 API 调用获取选项数据，否则 Semantic-UI 没有设置以编程方式提供选项。所以实际上你只需要像平常一样设置选择

<select name="cars" class="ui search selection dropdown select-car-model" multiple="" id="car-multiselect">
  <option value="">Select Car</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes-Benz">Mercedes-Benz</option>
</select>

然后初始化 Semantic-UI 它只是 $('.select-car-model').dropdown()

如果您碰巧使用某种框架，或者只是 jquery，您可以通过编程方式添加这些选项。请务必在 dropdown() 调用之前执行此操作。

var resultsArray = [ { value: "BMW", text: "BMW" }, { value: "Mercedes-Benz", text: "Mercedes-Benz" } ... ];

$.each(resultsArray, function (i, item) {
  $('.select-car-model').append($('<option>', {
    value: item.value,
    text: item.text
  }))
})

$('.select-car-model').dropdown()