尝试将 Bootstrap 下拉按钮文本更改为所选项目

Question

我正在使用 bootstrap 来设置下拉按钮的样式，并且我希望将按钮文本更改为从下拉列表中选择的任何项目。我猜 JavaScript 是实现这一点的最佳方法，但我还不太熟悉它。任何帮助将不胜感激。
这是我的第一个下拉按钮的 html。谢谢

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Genre
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <button class="dropdown-item" type="button">Adventure</button>
      <button class="dropdown-item" type="button">Sci-Fi</button>
      <button class="dropdown-item" type="button">Comedy</button>
    </div>

Answer 1

@finiteloop 感谢您的帮助。根据您指出的方向，我为每个下拉元素添加了一个 onclick 事件，并添加了以下函数来满足我的需要：

<div class="dropdown mx-3">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Genre
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Adventure</button>
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Sci-Fi</button>
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Comedy</button>
    </div>
  </div>

function showGenre(item) {
  document.getElementById("dropdownMenu1").innerHTML = item.innerHTML;
}