0
190
Views¿Cómo hacer que Bootstrap Select Dropdown actúe como una lista de pestañas con elementos de opción que tienen rol = pestaña?
¿Es posible hacer que el Bootstrap Select Dropdown menu actúe como una lista de pestañas? Básicamente, quiero cambiar el contenido en Select según lo que el usuario haya seleccionado, desde el valor <option> . Vi que hay un complemento bootstrap-select , que básicamente me brinda el 70% de la solución a mi problema, excepto que no es una tab list , solo tiene un menú desplegable "dentro" del elemento de selección. ¿Es posible cambiar la funcionalidad de esta bootstrap-select para que actúe como un panel de pestañas o una lista de pestañas?
Aquí está la imagen para mostrarte exactamente lo que quiero hacer:
Código
<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
Aquí, aprendí cómo hacerlo, solo investigando un poco sobre Stack Overflow.
Básicamente usé el show que puedes usar en cualquier pestaña con Bootstrap. Habiendo dicho eso, aprendí (de alguien en Stackoverflow, no recuerdo lo siento) que cuando la opción está seleccionada en la etiqueta <select> , (option:selected) , puede ver qué está seleccionado y luego usar ese data-target , que le dará la identificación, para mostrar esa pestaña, como lo haría si estuviera usando una pestaña simple sin usar <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>