如何使用Javascript为Bootstrap 5下拉菜单动态追加内容？

场景1：表单内年份选择 #

完全使用Bootstrap 5原生form-select组件，样式100%适配，无错位问题。

HTML代码 #

<select class="form-select" id="yearSelect" aria-label="年份选择"></select>

JS逻辑 #

const yearSelect = document.getElementById('yearSelect');
const currentYear = new Date().getFullYear();
const displayYearNum = 10; // 自定义展示的年份总数

// 示例为展示从当前年份开始往前10年的序列，如需展示未来年份，将减法改为加法即可
for (let i = 0; i < displayYearNum; i++) {
  const targetYear = currentYear - i;
  const optionItem = document.createElement('option');
  optionItem.value = targetYear;
  optionItem.textContent = targetYear;
  // 如需默认选中今年，添加以下代码
  // if (i === 0) optionItem.selected = true;
  yearSelect.appendChild(optionItem);
}

场景2：按钮式下拉菜单 #

完全遵循Bootstrap 5 dropdown组件DOM结构，样式和交互均和官方组件一致。

HTML代码 #

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="yearDropdownBtn">
    选择年份
  </button>
  <ul class="dropdown-menu" id="yearDropdownList"></ul>
</div>

JS逻辑 #

const yearDropdownList = document.getElementById('yearDropdownList');
const yearDropdownBtn = document.getElementById('yearDropdownBtn');
const currentYear = new Date().getFullYear();
const displayYearNum = 10;

for (let i = 0; i < displayYearNum; i++) {
  const targetYear = currentYear - i;
  const li = document.createElement('li');
  const dropdownItem = document.createElement('button');
  dropdownItem.className = 'dropdown-item';
  dropdownItem.type = 'button';
  dropdownItem.textContent = targetYear;
  // 点击后切换按钮显示文本
  dropdownItem.addEventListener('click', () => {
    yearDropdownBtn.textContent = targetYear;
    // 此处可添加年份选中后的自定义业务逻辑
  });
  li.appendChild(dropdownItem);
  yearDropdownList.appendChild(li);
}

注意事项 #

• 不要修改Bootstrap 5原生组件的默认类名和DOM层级结构，否则会出现样式错位、交互失效问题
• 可以自行调整displayYearNum参数修改展示的年份总数，修改循环中的加减逻辑即可切换展示历史年份/未来年份
• 确保页面已经正确引入Bootstrap 5的CSS和JS文件，Dropdown组件无需额外初始化即可正常工作

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