Bootstrap5动态添加Li后点击设置下拉框文本（嵌套下拉问题）

问题分析 #

你面临两个核心问题：

• 动态生成的<li>无法直接绑定点击事件
• 点击某个下拉项时，所有下拉按钮的文本都会被修改，而非当前项所属的下拉框

解决方案 #

采用事件委托绑定点击事件，同时通过DOM遍历定位当前下拉项所属的按钮，仅更新对应按钮的文本。

调整HTML结构（推荐）

由于存在多个下拉框，建议将唯一ID改为类名，避免ID冲突：

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    My list
  </button>
  <ul class="dropdown-menu my-ul">
    <!-- 动态生成的<li>将插入此处 -->
  </ul>
</div>

JavaScript代码

// 事件委托绑定到静态父元素（此处用document，也可替换为更接近的静态容器）
document.addEventListener('click', function(e) {
  // 仅处理下拉菜单内的<li>点击事件
  if (e.target.matches('.my-ul li')) {
    // 获取选中项的文本内容
    const selectedText = e.target.textContent.trim();
    // 定位当前<li>所属按钮组内的下拉按钮
    const dropdownBtn = e.target.closest('.btn-group').querySelector('.dropdown-btn');
    // 更新按钮显示文本
    dropdownBtn.textContent = selectedText;
    // 可选：点击选项后自动关闭下拉菜单
    const dropdownInstance = new bootstrap.Dropdown(dropdownBtn);
    dropdownInstance.hide();
  }
});

关键说明 #

1. 事件委托：将事件绑定到静态父元素，动态生成的<li>触发点击事件时会冒泡到父元素，从而被捕获处理，完美解决动态元素无法绑定事件的问题。
2. 精准DOM定位：通过closest('.btn-group')找到当前<li>所在的按钮组，再用querySelector定位到该组内的下拉按钮，确保只修改当前下拉框的文本，不会影响其他下拉框。
3. 自动关闭下拉框：如果需要点击选项后收起下拉菜单，实例化Bootstrap的Dropdown对象并调用hide()方法即可实现。

内容的提问来源于stack exchange，提问作者Daniel Sh.