Semanic UI dropdown with JQuery - 如何初始化一个semantic-ui dropdown with JQuery

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

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

Semanic UI dropdown with JQuery - 如何初始化一个semantic-ui dropdown with JQuery

Semanic UI dropdown with JQuery - How to initialize a semantic-ui dropdown with JQuery

javascript

jquery

drop-down-menu

semantic-ui