Restablecer el valor select2 y mostrar marcador de posición

Select2 ha cambiado su API:

Select2: El método select2("val") ha quedado obsoleto y se eliminará en versiones posteriores de Select2. Usa element element.val() en su lugar.

La mejor manera de hacer esto ahora es:

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

Editar: Diciembre 2016 Los comentarios sugieren que la siguiente es la forma actualizada de hacer esto:

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

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

Define select2:

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

O

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

Para restablecer:

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

O

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

Lo único que puede funcionar para mí es:

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

Estoy usando la versión 4.0.3

Referencia

Según la documentación de Select2

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

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

Y tiene la ventaja de que si tiene múltiples Select2 en el mismo formulario, todos ellos se reiniciarán con este único comando.

Usa esto:

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

PARA ELIMINAR EL VALOR SELECCIONADO

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

PARA BORRAR LOS VALORES DE LAS OPCIONES

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

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 tiene eventos de cambio vinculados a él

Primero debes definir select2 así:

$('#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");

Puede borrar la selección mediante

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

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

Así que es una solución media

Este es el camino correcto:

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

Estoy utilizando la última versión de Select2.

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

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

Utilice lo 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 selección de entrada mediante programación

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

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

Cuando esto sucede, generalmente significa que no tiene un <option></option> en 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>

También estaba teniendo este problema y se deriva de val(null).trigger("change"); lanzando un error No select2/compat/inputData antes de que el marcador de posición se restablezca. Lo resolví capturando el error y estableciendo el marcador de posición directamente (junto con un ancho). Nota: Si tiene más de uno, tendrá que atrapar a 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

He intentado soluciones anteriores, pero ninguna funcionó 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');

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

Esto es una especie de hackeo, donde no tienes que activar el cambio.

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

O

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

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

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

No necesitaba implementar initSelection

a partir de v. 4. 0.x...

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

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

Si está vacío, seleccionará el primer elemento de opción que puede no ser lo que desea

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

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

Para el titular de la plaza

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

Para restablecer un select 2

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

Espero que esto ayude

Antes de borrar el valor usando este $("#customers_select").select2("val", ""); Intente ajustar el enfoque a cualquier otro control al hacer clic en restablecer.

Esto mostrará el marcador de posición de nuevo.

La interfaz DOM, ya realiza un seguimiento del estado inicial...

Así que hacer lo siguiente es suficiente:

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

Bueno, cada vez que lo hice

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

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

Dado que tengo las opciones allowClear establecidas en true, fui con

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

Esto puede ser seguido por un $('myselectdropdown').select2 ('close'); activador de eventos en el elemento select2 dom en caso de que desee cerrar el menú desplegable abrir sugerencia.

Una manera [muy] hacky de hacerlo (vi que funciona 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 debe ponerse en true
• una opción vacía debe existir en el elemento select

Después de probar las primeras 10 soluciones aquí y fallar, encontré esta solución para trabajar (ver "nilov comentó el 7 de abril * editado" comentario 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 entonces:

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

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

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');
    });

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

Donde 0 es el primer valor del menú desplegable

Utilice este código en su archivo js

$('#id').val('1');
$('#id').trigger('change');

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

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