jquery - example - select2 selected

Restablece el valor de select2 y muestra el marcador de posición

Question

¿Cómo configuro el marcador de posición en restablecimiento de valor mediante select2? En mi ejemplo, si se hace clic en las ubicaciones o cuadros de selección de grados y mi select2 tiene un valor que el valor de select2 debe reiniciarse y mostrar el marcador de posición predeterminado. Este script está restableciendo el valor pero no mostrará el marcador de posición

$("#locations, #grade ").change(function() {
   $(''#e6'').select2(''data'', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: ''resolve'',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: ''json'',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $(''#grade option:selected'').val(),
         o: $(''#locations option:selected'').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});

Answer 1

Antes de borrar el valor usando este $("#customers_select").select2("val", ""); Intente configurar el foco en cualquier otro control al hacer clic en Restablecer.

Esto mostrará el marcador de posición nuevamente.

Answer 2

Bueno cada vez que lo hice

$(''myselectdropdown'').select2(''val'', '''').trigger(''change'');

Empecé a tener algún tipo de retraso después de tres o cuatro factores desencadenantes. Supongo que hay una pérdida de memoria. No está dentro de mi código porque si elimino esta línea, mi aplicación está libre de retraso.

Como tengo allowClear options establecido en true, fui con

$(''.select2-selection__clear'').trigger(''mousedown'');

Esto puede ir seguido de $ (''myselectdropdown''), select2 (''cerrar''); desencadenar evento en el elemento select2 dom en caso de que desee cerrar el menú desplegable de sugerencia abierta.

Answer 3

Debe definir el select2 como

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

Para restablecer el select2

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

Answer 4

Después de probar las primeras 10 soluciones aquí y fallar, encontré que this solución funcionaba (consulte "comentario de nilov el 7 de abril" editado "en la página):

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2(''data'', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return ''<option value="'' + item.id + ''">'' + item.text + ''</option>'';
       });
       $select.html(options.join('''')).change();
   };
})(jQuery);

El cambio se hace luego:

var data = [{ id: 1, text: ''some value'' }];
$(''.js-some-field'').refreshDataSelect2(data);

(El autor originalmente mostró var $select = $(this[1]); , que un comentarista corrigió a var $select = $(this[0]); que muestro arriba).

Answer 5

En primer lugar, debe definir select2 de esta manera:

$(''#id'').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: ''100%'',
})

Para restablecer select2, simplemente puede usar el siguiente bloque de código:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

Answer 6

Esta es la forma correcta:

 $("#customers_select").val('''').trigger(''change'');

Estoy usando la última versión de Select2.

Answer 7

He intentado con las soluciones anteriores pero ninguna ha funcionado con la versión 4x.

Lo que quiero lograr es: borrar todas las opciones pero no tocar el marcador de posición. Este código funciona para mí.

selector.find(''option:not(:first)'').remove().trigger(''change'');

Answer 8

La interfaz DOM ya hace un seguimiento del estado inicial ...

Entonces, hacer lo siguiente es suficiente:

$("#reset").on("click", function () {
    $(''#my_select option'').prop(''selected'', function() {
        return this.defaultSelected;
    });
});

Answer 9

La respuesta aceptada no funciona en mi caso. Estoy intentando esto, y está funcionando:

Definir select2:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

o

$("#customers_select").select2({
    placeholder: "Select a State"
});

Reiniciar:

$("#customers_select").val('''').trigger(''change'')

o

$("#customers_select").empty().trigger(''change'')

Answer 10

Lo único que puede funcionar para mí es:

$(''select2element'').val(null).trigger("change")

Estoy usando la versión 4.0.3

Answer 11

Mi solución es:

$el.off(''select2:unselect'')
$el.on(''select2:unselect'', function (event) {
    var $option = $(''<option value="" selected></option>'');
    var $selected = $(event.target);

    $selected.find(''option:selected'')
             .remove()
             .end()
             .append($option)
             .trigger(''change'');
    });

Answer 12

Para el titular del lugar

$("#stateID").select2({
    placeholder: "Select a State"
});

Para restablecer un seleccionar 2

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

Espero que esto ayude

Answer 13

Para los usuarios que cargan datos remotos, this restablecerá select2 al marcador de posición sin disparar ajax. Funciona con v4.0.3:

$("#lstProducts").val("").trigger("change.select2");

Answer 14

Para restablecer los valores y el marcador de posición, simplemente reinicio el elemento select2:

$( "#select2element" ).select2({
    placeholder: ''---placeholder---'',
    allowClear: true,
    minimumResultsForSearch: 5,
    width:''100%''
});

Answer 15

Probé las soluciones anteriores, pero no funcionó para mí.

Esto es una especie de truco, donde no tienes que desencadenar el cambio.

$("select").select2(''destroy'').val("").select2();

o

$("select").each(function () { //added a each loop here
        $(this).select2(''destroy'').val("").select2();
});

Answer 16

Puede borrar la selección por

$(''#object'').empty();

Pero no te devolverá a tu marcador de posición.

Entonces es una solución a medias

Answer 17

Sé que esta es una vieja pregunta, pero esto funciona para la versión 4.0 de Select2

 $(''#select2-element'').val('''').trigger(''change'');

o

$(''#select2-element'').val('''').trigger(''change.select2''); 

si tienes eventos de cambio ligados a él

Answer 18

Select2 ha cambiado su API:

Select2: el select2("val") ha quedado en desuso y se eliminará en versiones posteriores de Select2. Use $ element.val () en su lugar.

La mejor manera de hacer esto ahora es:

$(''#your_select_input'').val('''');

Edición: diciembre de 2016 Los comentarios sugieren que a continuación se encuentra la forma actualizada de hacerlo:

$(''#your_select_input'').val([]);

Answer 19

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 20

Siguiendo la forma recomendada de hacerlo. Se encuentra en la documentación https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (este parece ser un problema bastante común):

Cuando esto sucede, generalmente significa que no tiene una <option></option> blanco como primera opción en su <select> .

como en:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

Answer 21

También estaba teniendo este problema y se deriva de val(null).trigger("change"); lanzando un No select2/compat/inputData antes de que el marcador de posición se restablezca. Lo resolví captando el error y estableciendo el marcador de posición directamente (junto con un ancho). Nota: si tienes más de uno necesitarás atrapar cada uno.

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$(''.select2-search__field'')[0].placeholder=''All Items'';
$(''.select2-search__field'')[1].placeholder=''All Locations'';
$(''.select2-search__field'').width(173);

Estoy ejecutando Select2 4.0.3

Answer 22

Una [muy] hacky forma de hacerlo (lo vi funcionar para la versión 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

• allowClear se debe establecer en verdadero
• una opción vacía debe existir en el elemento de selección

Answer 23

Usar select2 versión 3.2 esto funcionó para mí:

$(''#select2'').select2("data", "");

No fue necesario implementar initSelection

Answer 24

Use siguiente para configurar select2

    $(''#selectelementid'').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

Y para borrar la entrada seleccionada mediante programación

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

Answer 25

Utilizar esta :

$(''.select'').val([]).trigger(''change'');

Answer 26

a partir de v.4.0.x ...

para borrar los valores, pero también restaurar el uso del marcador de posición ...

.html(''<option></option>'');  // defaults to placeholder

si está vacío, seleccionará la primera opción en su lugar, lo que puede no ser lo que quieres

.html(''''); // defaults to whatever item is first

Francamente ... Select2 es un gran dolor en el trasero, me sorprende que no haya sido reemplazado.

Answer 27

PARA ELIMINAR EL VALOR SELECCIONADO

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

PARA LIMPIAR LOS VALORES DE LA OPCIÓN

$(''#employee_id'').html('''');

Answer 28

$(''myselectdropdown'').select2(''val'', ''0'')

donde 0 es su primer valor del menú desplegable