使用 Handlebars 和 jQuery 呈现 Bootstrap 下拉列表中的项目

Question

所以我试图在下拉列表中显示从 API 调用中获得的项目。我在 Handlebars 文件中有 Bootstrap 下拉菜单，我试图在 jQuery 中使用 forEach 遍历每个项目（教室名称）并将它们显示在下拉菜单中，因此用户可以 select其中一间教室。

这是我在把手中设置的下拉菜单：

    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle classroom-list-schedule" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Classroom
      </button>
      <div class="dropdown-menu">
        <div class="classroom-dropdown"></div>
      </div>
    </div>

下面是我用 jQuery 尝试过的两个不同的东西，它们都没有给我我需要的结果：

  const classDropdown = function () {
    data.classrooms.forEach(function (classroom) {
      $('.classroom-dropdown').html('<a class="dropdown-item">' + classroom.classname + '</a>')
    })
  }
  classDropdown()

^ 这只会在下拉列表中显示最后一个教室，而不是每个教室。这确实有意义，因为 jQuery HTML 位于 forEach 函数内部，就好像每次都在重写。

  $('.classroom-dropdown').html(function () {
    data.classrooms.forEach(function (classroom) {
      console.log(classroom.classname)
      return '<a class="dropdown-item">' + classroom.classname + '</a>'
    })
    // return '<a class="dropdown-item">' + 'hi' + '</a>'
  })

^ 这个运行控制台日志，但似乎无法识别 return 语句，没有类名输出到下拉列表，可能是因为它是函数内部的函数？但是注释掉的 return 确实显示，这仍然是一个问题，因为它在 forEach 函数之外。

谁能给我指明正确的方向，哪一个尝试更接近，我可能遗漏了什么？

谢谢！

Answer 1

使用.append()

示例：

$('.classroom-dropdown').append('<a class="dropdown-item">' + classroom.classname + '</a>')

而不是.html()

Documentation

使用 Handlebars 和 jQuery 呈现 Bootstrap 下拉列表中的项目

Using Handlebars and jQuery to render items in a Bootstrap dropdown list

javascript

jquery

handlebars.js