0
188
ViewsHow to make Bootstrap Select Dropdown act like a Tab List with option elements that have role=tab?
Is it possible to make Bootstrap Select Dropdown menu act like a Tab List? Basically, I want to change the content in the Select depending on what user has selected, from the <option> value. I saw there is bootstrap-select plugin, which basically is giving me 70% of the solution to my problem, except it is not a tab list it just has a dropdown menu "inside" the select element. Is it possible to change then functionality of this bootstrap-select to act like a tab panel or tab list?
Here is the picture to show you precisely what I want to do:
Code
<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>
1 answers
Answer question0
Here, I learned how to do it, just with a little bit of researching on Stack Overflow.
Basically I used the show which you can use on any tab with
Bootstrap. Having said that, I learned (from someone on Stackoverflow, cant remember sorry) that when the option is selected in <select> tag, (option:selected), you can then see what is selected and then use that data-target, which will give you the id, to show that tab, like you would do if you are using simple tab without using the <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>