Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por lo tanto, restableceremos select2 para mostrar el marcador de posición.

Limpiar Select2 jQuery
Limpiar Select2 jQuery

¿Qué es el complemento Select2?

El complemento select2 es un complemento jQuery muy famoso y trabaja directamente en las etiquetas Select del HTML. Además, para usar el complemento select2 debemos de declarar las librerías necesarias para que funcione correctamente.

Por consiguiente, podemos hacer varias cosas, como seleccionar el cuadro con la búsqueda, seleccionar la opción con la casilla de verificación, autocompletar Ajax, buscador en etiqueta select, entre otras opciones, etc.

¿Cómo poder restablecer Select2?

El complemento jQuery select2 proporciona una opción para reiniciar y para mostrar el marcador de posición. Por lo tanto, solo se agrega el marcador de posición en select2 muestra automáticamente el marcador de posición.
La solución para resetear select2

$('.category').select2({

 placeholder: "Select Category",

 allowClear: true // Esto es para borrar obtener el botón borrar si lo desea

});

Ejemplo completo:
Mostraremos todo el script para que puedan ver en funcionamiento el complemento

<html lang="en">
<head>
<title>PHP Select2 Multiple Select Example Tutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>

<body>
<div class="row mt-5">
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-info text-white">
<h6>Select2 Multiple Selected Get Value and Text Example - Nicesnippets.com</h6>
</div>
<div class="card-body" style="height: 300px;">
<div class="row mb-2">
<div class="data-response col-md-12" style="display: none;">
<div class="alert alert-success"></div>
</div>
</div>
<form method="POST">
<div class="form-group">
<label>Category :</label>
<select class="category form-control" name="category[]" multiple>
<option value="1">Laravel</option>
<option value="2">Jquery</option>
<option value="3">PHP</option>
<option value="4">React</option>
<option value="5">Jquery ui</option>
<option value="6">Android</option>
<option value="7">React Native</option>
<option value="8">Vue js</option>
<option value="9">Bootstrap 4</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-success store-data btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.category').select2({
placeholder: "Select Category",
allowClear: true // This is for clear get the clear button if wanted
});
});
</script>
</body>
</html>

2da forma: Eliminar las opciones seleccionadas:

Existen otras formas para limpiar un select2 y a continuación veremos varios ejemplos.

$('#mySelect2').val(null).trigger('change');

Eliminar completamente la inicialización de select2

$('#payment_method').html('').select2({data: [{id: '', text: ''}]});

Restablecer el valor select2 y mostrar marcador de posición

$("#customers_select").select2({
placeholder: "Select a customer",
initSelection: function(element, callback) { 
}
});

Para restablecer la select2

$("#customers_select").select2("val", "");

Borrar los elementos seleccionados en Select2.

Si deseamos borrar la selección de los valores que se seleccionan usando Select2 podemos usar la función empty().

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>

El menú desplegable se puede limpiar utilizando jQuery.

$("#select2_example").empty();

Otra opción para reiniciar podemos usar la siguiente línea de código.

$("#select2_example").select2("val", "");

CONCLUSIÓN

En este articulo hemos aprendido a limpiar los valores de select2 de manera dinámica para que no existan errores.
Recuerden que el complemento select2 es uno de los más usados en los sistemas web y que nos proporciona un buscador instantáneo en nuestras etiquetas select por ejemplo. Por lo tanto, nos brindan una interfaz amigable hacia el usuario final.

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Array dentro de ciclo Foreach PHP

Array dentro de ciclo Foreach PHP: ejemplo completo

Array dentro de ciclo Foreach PHP. A veces se requiere validar si existe un elemento de un ARRAY dentro de un ciclo While o ciclo foreach en…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *