如何使 Bootstrap Select 下拉列表像选项卡列表一样使用具有 role=tab 的选项元素？

Question

是否可以让 Bootstrap Select Dropdown menu 像标签列表一样工作？基本上，我想根据 select 用户从 <option> 值更改 Select 中的内容。我看到有 bootstrap-select 插件，它基本上为我提供了 70% 的问题解决方案，除了它不是 tab list 它只是在 select“内部”有一个下拉菜单元素。是否可以更改此 bootstrap-select 的功能，使其像选项卡面板或选项卡列表一样工作？

这张图片向您展示了我想要做的事情：

代码

    <select class="selectpicker">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
    </select>
  <!--Show the different p tag depending on the option value-->
    <p>This is a Mustard tab</p>
    <p>This is a Ketchup tab</p>
    <p>This is a Barbecue tab</p>

Answer 1

在这里，我学会了如何去做，只是对 Stack Overflow 进行了一些研究。

基本上我使用了 show，你可以在任何选项卡上使用它 Bootstrap。话虽如此，我了解到（从 Whosebug 上的某个人那里，不记得抱歉）当在 <select> 标签 (option:selected) 中选择选项时，您可以看到选择的内容然后使用 data-target，这将为您提供显示该选项卡的 ID，就像您在不使用 <select>

的情况下使用简单选项卡时所做的那样

$("#mySelect").on("change", function(e) {
  var $optionSelected = $("option:selected", this);
  $optionSelected.tab("show");
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<select class="form-control selectpicker" id="mySelect">
  <option data-target="#mustard">Mustard</option>
  <option data-target="#ketchup">Ketchup</option>
  <option data-target="#barbecue">Barbecue</option>
</select>

<div class="tab-content">
  <div class="tab-pane active" id="mustard">Mustard</div>
  <div class="tab-pane" id="ketchup">. Ketchup</div>
  <div class="tab-pane" id="barbecue">Barbecue</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

如何使 Bootstrap Select 下拉列表像选项卡列表一样使用具有 role=tab 的选项元素？

How to make Bootstrap Select Dropdown act like a Tab List with option elements that have role=tab?

javascript

html

jquery

bootstrap-4

bootstrap-select

代码