如何使用JavaScript修改Bootstrap下拉菜单按钮的显示标题

原有代码失效原因 #

• 拼写错误：你之前编写的innerHTMl最后一个字符为大写字母L，正确拼写为innerHTML
• 语义问题：<a>标签不属于表单元素，不原生支持value属性，需要通过getAttribute('value')获取自定义属性值

最小修改方案（适配你现有代码结构 #

你只需要把事件监听内的代码替换为以下内容即可生效：

let e = document.getElementById("acceptanceRateButton");

e.addEventListener("click",function(){
  // 两种取值方式二选一即可
  // 方式1：取自定义value属性的值
  const selectText = this.getAttribute('value');
  // 方式2：直接取选项显示的文本内容
  // const selectText = this.textContent;
  document.getElementById("dropDownButton").textContent = selectText;
});

*注：使用textContent代替innerHTML安全性更高，可避免XSS注入风险，无需插入HTML内容的场景优先用textContent即可，且不会影响Bootstrap自带的下拉箭头样式（箭头为CSS伪元素生成，不会被文本替换覆盖）。

通用优化方案（无需为每个选项单独绑定事件） #

后续新增下拉选项不需要额外修改JS代码，统一绑定所有下拉选项的点击事件：

// 选中所有下拉选项
const allOptions = document.querySelectorAll('.dropdown-item');
// 批量绑定点击事件
allOptions.forEach(option => {
  option.addEventListener('click', function() {
    // 修改按钮显示文本为选中项内容
    document.getElementById('dropDownButton').textContent = this.getAttribute('value') || this.textContent;
  });
});

内容的提问来源于stack exchange，提问作者KhushThakor