Question

使用 JQuery 的语义 UI 下拉菜单 - 如何使用 JQuery 初始化语义 UI 下拉菜单

2017-02-13

2400

javascript jquery drop-down-menu semantic-ui

我有一个这样的数组

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()