Restablecer elementos seleccionados con SELECT2

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