如何用JavaScript程序化设置Bootstrap下拉菜单的选中项？

你的方法无效是因为 #dd 是一个 <div>（下拉菜单容器），而非 <select> 这类原生表单控件。Bootstrap 下拉菜单只是基于按钮和链接构建的 UI 组件，没有原生的 value 属性，因此无法通过 .val() 或 element.value 直接设置选中值。

要程序化设置 Bootstrap 下拉菜单的选中状态，需要完成以下操作：

• 更新下拉切换按钮的文本，匹配目标选项
• 给目标选项添加 active 类（Bootstrap 用这个类标记选中状态）
• 移除其他选项的 active 类

原生 JavaScript 实现 #

// 目标选中值
const targetValue = '1';

// 找到对应数据值的下拉项
const targetItem = document.querySelector(`.dropdown-item[data-value="${targetValue}"]`);
if (targetItem) {
    // 更新切换按钮的显示文本
    const toggleBtn = document.getElementById('ddDataUsage');
    toggleBtn.textContent = targetItem.textContent.trim();
    
    // 清除所有下拉项的active状态
    document.querySelectorAll('.dropdown-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // 标记目标项为选中状态
    targetItem.classList.add('active');
}

jQuery 实现 #

const targetValue = '1';

const $targetItem = $(`.dropdown-item[data-value="${targetValue}"]`);
if ($targetItem.length) {
    // 更新切换按钮文本
    $('#ddDataUsage').text($targetItem.text().trim());
    
    // 切换选中状态
    $('.dropdown-item').removeClass('active');
    $targetItem.addClass('active');
}

额外：触发选项点击事件 #

如果你的下拉项绑定了点击事件逻辑，可以直接模拟点击目标项，自动完成状态更新和事件触发：

// 原生 JS
targetItem.click();

// jQuery
$targetItem.click();

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