Bootstrap 5下拉选切换Tab：Firefox可用，Chrome/Safari无响应

Bootstrap 5的Tab组件默认监听点击事件触发切换，而<option>标签的事件行为在不同浏览器中存在差异：

• Firefox会在用户选中<option>时给该选项触发点击事件，因此data-bs-toggle="pill"能正常触发Tab切换；
• Chrome和Safari不会给<option>触发点击事件，仅给父级<select>标签触发change事件，导致Bootstrap的Tab监听逻辑无法捕获触发信号，因此切换无反应。

移除<option>上的data-bs-toggle等Tab相关属性，给<select>绑定change事件，手动调用Bootstrap的Tab实例方法完成面板切换：

修正后的HTML代码 #

<div class="container">
    <form>
        <select class="form-select" id="pills-tab-select">
            <option selected value="0">One</option>
            <option value="1">Two</option>
            <option value="2">Three</option>
        </select>
    </form> 
</div>

<div class="container">
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-0" role="tabpanel" tabindex="0">
            One
        </div>
        <div class="tab-pane fade" id="pills-1" role="tabpanel" tabindex="1">
            Two
        </div>
        <div class="tab-pane fade" id="pills-2" role="tabpanel" tabindex="2">
            Three
        </div>
        <div class="tab-pane fade" id="pills-3" role="tabpanel" tabindex="3">
            Four
        </div>
    </div>
</div>

对应的JavaScript代码 #

document.getElementById('pills-tab-select').addEventListener('change', function(e) {
    const targetTab = `#pills-${e.target.value}`;
    // 调用Bootstrap Tab的切换方法
    const tabInstance = new bootstrap.Tab(document.querySelector(targetTab));
    tabInstance.show();

    // 可选：同步选中选项的样式状态
    Array.from(this.options).forEach(opt => opt.classList.remove('active'));
    this.options[e.target.selectedIndex].classList.add('active');
});

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