Restablecer elementos seleccionados con SELECT2. Cuando trabajamos con ventana modales de BootStrap 4 se suele usar el complemento de JQuery llamado SELECT2 que nos brinda una excelente ayuda a la hora de mostrar y buscar información.
Por lo tanto, al usar este complemento en una etiqueta SELECT se suele quedar marcada al cerrar la ventana modal y al abrir se observa que los elementos del Select siguen marcado.
Restablecer elementos seleccionados con SELECT2
En articulo veremos como limpiar elementos seleccionados cuando se abre la ventana modal.
Primera forma: Al abrir Modal Bootstrap 4
Podemos aprovechar para limpiar el formulario apoyándonos el evento click()
<select id="Producto">
<option value="apple">Teclado</option>
<option value="orange">Mouse</option>
<option value="banana">Camara web</option>
</select>A la etiqueta SELECT de HTML se le agrego un id de nombre id="Producto" para que el complemento select2 funcione
$(document).ready(function() {
$("#mySelect2").select2({width: "100%"});
});Abrir Modal de BootStrap 4 con jQuery
Usando la clase .addProducto podemos abrir una ventana modal y de paso agregar la siguiente linea con el identificador Producto
$('#Producto').val(null).trigger('change');
Esta instrucción limpiara y reseteará SELECT2
$(document).on('click', '.addProducto', function(e) {
e.preventDefault();
$('#addProductoModal').modal('show');
$('#Producto').val(null).trigger('change');
});Restablecer Seelct2 con botón
Usando un simple botón y al darle click se limpiara la lista desplegable múltiple.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet">
<script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select id="mySelect2">
<option value="apple">Tecladp</option>
<option value="orange">Mouse</option>
<option value="banana">Camara Web</option>
</select>
<button id="clearSelect2">Restablecer</button>Bodigo jQuery para limpiar select2
function clearSelectedOptions() {
$('#mySelect2').val(null).trigger('change');
}
$(document).ready(function() {
$("#mySelect2").select2({width: "100%"});
$("#clearSelect2").on("click", clearSelectedOptions);
});En conclusión, hemos aprendido 2 manera de limpiar una etiqueta select con el complemento select2
