Bootstrap 5.3 tablist 里面<select><option>不能在除最新的firefox之外的其他浏览器上工作

Question

除了 Mozilla Firefox 浏览器之外，我的以下代码无法正常工作。我正在使用 Bootstrap 5.3。任何人都可以帮助我制作带有选择选项的工作表格列表吗？

这是我的代码在谷歌浏览器和除火狐之外的其他浏览器中不起作用。

<div class="select-dropdown">
  <select id="bTransaction" role="tablist">
    <option class="active" id="business1-tab" data-bs-toggle="tab" data-bs-target="#business1" role="tab" aria-controls="business1" aria-selected="true">Business 1</option>
    <option id="business2-tab" data-bs-toggle="tab" data-bs-target="#business2" role="tab" aria-controls="business2" aria-selected="false">Business 2</option>
    <option id="business3-tab" data-bs-toggle="tab" data-bs-target="#business3" role="tab" aria-controls="business3" aria-selected="false">Business 3</option>
  </select>
</div>
<div class="tab-content" id="bTransactionContent">
  <div class="tab-pane fade show active" id="business1" role="tabpane" aria-labelledby="business1-tab">
    Business 1 Content
  </div>
  <div class="tab-pane fade" id="business2" role="tabpane" aria-labelledby="business2-tab">
    Business 2 Content
  </div>
  <div class="tab-pane fade" id="business3" role="tabpane" aria-labelledby="business3-tab">
    Business 3 Content
  </div>
</div>

Answer 1

尝试在没有 bootsrtap 属性的情况下添加下拉菜单以进行选项卡切换，将事件侦听器添加到选择下拉列表中并隐藏所有选项卡窗格，然后显示所选选项卡： if (selectedTab){ selcetedTab.classList.add('show','active'); }