javascript - allowclear - select2 set selected value

Restablecer el valor Select2 en el menú desplegable con el botón de reinicio

Question

¿Cuál sería la mejor manera de restablecer el elemento seleccionado a los valores predeterminados? Estoy usando la biblioteca Select2 y cuando utilizo un botón normal type="reset" , el valor en el menú desplegable no se restablece.

Entonces, cuando presione mi botón, quiero que se muestre nuevamente "Todo".

jQuery

$("#d").select2();

html

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Answer 1

versión 4.0

$(''#d'').val('''').trigger(''change'');

Esta es la solución correcta de ahora en adelante según el mensaje obsoleto arrojado en modo de depuración: "El select2("val") ha quedado en desuso y se eliminará en versiones posteriores de Select2. Use $element.val() lugar"

Answer 2

A veces quiero restablecer Select2 pero no puedo sin el método change (). Entonces mi solución es:

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

Utilizando :

resetSelect2Wrapper("#mySelectId", "myValue");

Answer 3

De acuerdo con la última versión (select2 3.4.5) documentada here , sería tan simple como:

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

Answer 4

Intentaré algo como esto:

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2(''val'', ''All'');
    });
});

Answer 5

La mejor forma de hacerlo es:

$(''#e1.select2-offscreen'').empty(); //#e1 : select 2 ID
$(''#e1'').append(new Option()); // to add the placeholder and the allow clear

Answer 6

Lo que encontré funciona bien es el siguiente:

si tiene una opción de marcador de posición como ''Todos'' o ''-Seleccionar-'' y es la primera opción y es que quiere establecer el valor cuando ''reinicie'' puede usar

$(''#id'').select2(''val'',0);

0 es esencialmente la opción que desea configurar en restablecer. Si desea establecerlo en la última opción, obtenga la longitud de las opciones y configúrelo con esa longitud: 1. Básicamente use el índice de la opción a la que desee establecer el valor select2 en el reinicio.

Si no tiene un marcador de posición y solo desea que no aparezca ningún texto en el campo, utilice:

$(''#id'').select2(''val'','''');

Answer 7

Para lograr una solución genérica, ¿por qué no hacer esto?

$('':reset'').live(''click'', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest(''form'').find(''.select2-offscreen'').trigger(''change''); 
    }, 10);
});

De esta forma: no tendrá que hacer una nueva lógica para cada select2 en su aplicación.

Y no es necesario que conozca el valor predeterminado (que, por cierto, no tiene que ser "" ni siquiera la primera opción)

Finalmente, establecer el valor en :selected no siempre lograría un verdadero restablecimiento, ya que la corriente seleccionada podría haberse configurado programáticamente en el cliente, mientras que la acción predeterminada del form select es devolver los valores del elemento de entrada a los enviados por el servidor .

EDITAR: Alternativamente, considerando el estado en desuso del live , podríamos reemplazar la primera línea con esto:

$(''form:has(:reset)'').on(''click'', '':reset'', function(){

o mejor aún:

$(''form:has(:reset)'').on(''reset'', function(){

PD: Personalmente creo que reiniciar en el reinicio, así como desencadenar blur y focus eventos conectados a la selección original, ¡son algunas de las características "ausentes" más destacadas en select2!

Answer 8

Para mí solo funciona con cualquiera de estas soluciones

$(this).select2(''val'', null);

o

$(this).select2(''val'', '''');

Answer 9

Select2 usa una clase de CSS específica, por lo que una forma fácil de restablecerlo es:

$(''.select2-container'').select2(''val'', '''');

Y tiene la ventaja de que si tiene múltiples Select2 en la misma forma, todos serán reseteados con este único comando.

Answer 10

Si tiene un widget de selección lleno, por ejemplo:

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

querrá convencer a select2 para restaurar el valor seleccionado originalmente al restablecer, de forma similar a cómo funciona un formulario nativo. Para lograr esto, primero reinicie el formulario nativo y luego actualice select2:

$(''button[type="reset"]'').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest(''form'').get(0).reset();
    // And then update select2 to match
    $(''#d'').select2(''val'', $(''#d'').find('':selected'').val());
}

Answer 11

También puedes restablecer el valor de select2 usando

$(function() {
  $(''#d'').select2(''data'', null)
})

alternativamente puede pasar ''allowClear'': true al llamar a select2 y tendrá un botón X para restablecer su valor.

Answer 12

Veo tres problemas:

1. La visualización del control Select2 no se actualiza cuando se cambia su valor debido a un reinicio del formulario.
2. La opción "Todos" no tiene un atributo de value .
3. La opción "Todos" está desactivada.

Primero, le recomiendo que use la función setTimeout para asegurarse de que el código se ejecute después de que se complete el restablecimiento del formulario.

Puede ejecutar el código cuando se hace clic en el botón:

$(''#searchclear'').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

O cuando el formulario se restablece:

$(''form'').on(''reset'', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

En cuanto a qué código usar:

Como la opción "Todos" está desactivada, el restablecimiento del formulario no lo convierte en el valor seleccionado. Por lo tanto, debe establecer explícitamente que sea el valor seleccionado. La forma de hacerlo es con la función Select2 "val". Y dado que la opción "Todos" no tiene un atributo de value , su valor es el mismo que su texto, que es "Todos". Por lo tanto, debe usar el código proporcionado por thtsigma en la respuesta seleccionada:

$("#d").select2(''val'', ''All'');

Si el value="" del atributo value="" fuera agregado a la opción "Todos", entonces podría usar el código proporcionado por Daniel Dener:

$("#d").select2(''val'', '''');

Si la opción "Todos" no estaba deshabilitada, entonces simplemente tendría que forzar la actualización de Select2, en cuyo caso podría usar:

$(''#d'').change();

Nota: El siguiente código de Lenart es una forma de borrar la selección, pero no hace que se seleccione la opción "Todos":

$(''#d'').select2(''data'', null)

Answer 13

puedes usar:

$("#d").val(null).trigger("change"); 

¡Es muy simple y funciona bien! Si se usa con el botón de reinicio:

$(''#btnReset'').click(function() {
    $("#d").val(null).trigger("change"); 
});

Answer 14

    // Store default values
    $(''#filter_form [data-plugin="select2"]'').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $(''#formresetbtn'').on(''click'', function() {
        $(''#filter_form [data-plugin="select2"]'').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger(''change'');
            });
        });