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   <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>   Anterior
</button>
<button type="submit" name="submit" class="submit action-button" value="Enviar" onclick="continuar3();" >
<i class="fa fa-paper-plane"></i>   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>