baulcode
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
¿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.
