1

Hace poco descargue y empecé a utilizar el boostrap select y todo funciona correctamente, salvo por el detalle de que una vez que lo abra ya no se cierra ni aunque le de clic al select o fuera del select, se queda abierto el resto del programa. Me gustaría saber si hay alguna clase o forma de cerrar ese select de boostrap. Para hacer que se abriera utilicé una clase:

Código para usar el select y permitir que se abriera.

 $( document ).ready(function() {
$(".selectpicker").selectpicker();
    $(".selectpicker").click(function () {
         $(this).addClass("open");
    });

});

Codigo html del selector

<select class="selectpicker"  multiple data-max-options="3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
    <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
    <option>Barbecue</option>
    <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

Yo intente agregar $(this).addClass("close"); abajo de $(this).addClass("open"); para ver si esa clase me cerraba las opciones, pero no funciono.

Actualizacion

Ya agregue la clase toggle pero sigue sin funcionar al momento de cerrar las opciones y tiene todas las dependencias que en teoría debería de necesitar para poder funcionar, estoy usando el plugin de silvio moreto

Codigo completo

<link rel="stylesheet" type="text/css" href="vista/plugin/forms_pago/form_pago1/archivo.css">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">




<!-- multistep form -->
<form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Contacto</li>
    <li>Banco</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>



    <h2 class="fs-title">Informacion de Contacto</h2>
    <h3 class="fs-subtitle">Paso 1</h3>
    <input type="text" name="nombre" placeholder="Ingrese su Nombre" />
    <input type="text" name="apellidos" placeholder="Ingrese sus Apellidos" />
    <input type="text" name="email" placeholder="Ingrese su correo electronico" />

    <select class="selectpicker"  multiple data-hide-disabled="true" >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>




<button type="button" name="next" class="next action-button" value="Siguiente">

  Siguiente &nbsp <i class="fa fa-chevron-right"></i> 

</button>



  </fieldset>



  <fieldset>
    <h2 class="fs-title">Informacion Bancaria</h2>
    <h3 class="fs-subtitle">Paso 2</h3>
    <input type="text" name="nombre_asociado" placeholder="Ingrese el nombre Asociado" />
    <input type="text" name="clabe" placeholder="Ingrese la CLABE" />
    <input type="text" name="banco" placeholder="Ingrese el Banco" />
    <input type="text" name="numero_tarjeta" placeholder="Ingrese el numero de tarjeta" />


<button type="button" name="previous" class="previous action-button" value="Anterior" >

  <i class="fa fa-chevron-left"></i> &nbsp  Anterior  

</button>


<button type="submit" name="submit" class="submit action-button" value="Enviar" onclick="continuar3();"  >

      <i class="fa fa-paper-plane"></i> &nbsp Enviar  

</button>



  </fieldset>
</form>

<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

<!-- jQuery easing plugin -->
<script src="vista/plugin/forms_pago/form_pago1/archivo.js" type="text/javascript"></script>

<script type="text/javascript">

    $(".selectpicker").click(function () {
         $(this).addClass("open");
    });


</script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
1
  • No añadas el evento jQuery onClick. Simplemente carga las librerías y utiliza la clase .selectpicker como tienes en el código html y funciona perfectamente.
    – RafaelM
    Commented el 16 jun. 2017 a las 9:36

1 respuesta 1

2

La solución de mi problema era muy sencillo, solo tuve que agregar la siguiente linea de código abajo de jquery.

Código que se debe de agregar.

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.