Javascript Bootstrap 5向按钮添加动态下拉菜单并在点击时响应答案

【问题标题】：Javascript Bootstrap 5 add dynamic dropdown to button and respond on clickJavascript Bootstrap 5向按钮添加动态下拉菜单并在点击时响应
【发布时间】：2021-04-15 12:37:27
【问题描述】：

我正在尝试使用 Javascript 将元素动态添加到 Bootstrap 5 下拉列表。我正在关注此处的文档链接 (https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-items)。我可以成功地将动态列表添加到下拉列表中，但是当我选择它时，我无法通过函数获取值。我尝试使用全局变量，但它只获取添加到列表中的最后一个选项的名称。

有人可以建议如何响应 Bootstrap 5 下拉事件并获取标签字符串、id 或 innerHTML 吗？请指教

我的简单 Javascript 和 HTML 片段是

var def_names_list = ["My Name 1", "My Name 2", "My Name 3"]

function collapse_down() {
        console.log('inside collapse')
        console.log('collapse name is ', collapse_label)
        console.log(this)
        //console.log('id is ', id, 'value is ', value)

}
var collapse_label = ''
if (def_names_list.length > 0) {
    var ul = document.getElementById('collapse_dropdown')
    for (var x=0; x<def_names_list.length; x++) {
        collapse_label = ''
        var li = document.createElement("li")
        var but = document.createElement("button")
        var local_name = def_names_list[x]
        but.type = 'button'
        but.className = "dropdown-item"
        but.innerHTML = def_names_list[x]
        but.id = def_names_list[x]
        but.onclick = function() {
            collapse_label = local_name
            collapse_down()
        }
        li.appendChild(but)
        ul.appendChild(li)

    }
}

!DOCTYPE html>
<html lang="en">
    <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">        
    </head>

    <body>
      <button type="button" id='collapse' class="btn btn-primary btn-sm " data-bs-toggle="dropdown" aria-expanded="false"  >Collapse Groups</button>            
      <ul class="dropdown-menu" id="collapse_dropdown" aria-labelledby="collapse"></ul>
      
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>        
    </body>
</html>

【问题讨论】：

标签： javascript dropdown bootstrap-5

【解决方案1】：

我认为您的代码的问题在于您在循环中设置了 collapse_label 的值。由于 var 是全局变量，因此所有其他循环迭代的值都会发生变化。因此，您单击的任何名称始终只能获得姓氏。

这是我的解决方案：

var def_names_list = ["My Name 1", "My Name 2", "My Name 3"];

function collapse_down(el) {
  // console.log("inside collapse");
  console.log(el);
  console.log("Value: " + el.value);
  console.log("ID: " + el.id);
  console.log("InnerHTML: " + el.innerHTML);
}
if (def_names_list.length > 0) {
  var ul = document.getElementById("collapse_dropdown");
  for (var name of def_names_list) {
    var li = document.createElement("li");
    var but = document.createElement("button");
    but.className = "dropdown-item";
    but.innerHTML = name;
    but.value = name;
    but.id = name;
    but.onclick = function() {
      collapse_down(this);
      /*  
      // You declared the collapse_down() as a sepearte function. That is fine, but
      // instead you could also put it directly in the event-function:
      console.log(this);
      console.log("Value: " + this.value);
      console.log("ID: " + this.id);
      console.log("InnerHTML: " + this.innerHTML);
      */
    };
    li.appendChild(but);
    ul.appendChild(li);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
</head>

<body>
  <button type="button" id="collapse" class="btn btn-primary btn-sm" data-bs-toggle="dropdown" aria-expanded="false">
    Collapse Groups
  </button>
  <ul class="dropdown-menu" id="collapse_dropdown" aria-labelledby="collapse"></ul>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
    crossorigin="anonymous"></script>
  <script src="./src/index.js"></script>
</body>
</html>

【讨论】：

太棒了，非常感谢，我可以看到从定义中传递“this”如何使我能够访问特定实例的属性。我会试一试并在第二天左右报告，但我预计会成功，谢谢@jan