我正在尝试使用Javascript向Bootstrap 5下拉列表中动态添加元素。我正在关注此处的文档链接(https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-项目(。我可以成功地将动态列表添加到下拉列表中，但当我选择它时，我无法通过函数获得值。我尝试使用全局变量，但它只获得添加到列表中的最后一个选项的名称。
有人能建议如何响应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>我认为代码的问题在于在循环中设置了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>