Restablezca el valor de select2 y muestre el marcador de posición

¿Cómo configuro el marcador de posición para restablecer el valor con select2? En mi ejemplo, si se hace clic en ubicaciones o en cuadros de selección de calificación y mi select2 tiene un valor que el valor de select2 debería restablecerse y mostrar el marcador de posición predeterminado. Este script restablece el valor pero no muestra 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;
   }
});

Debe definir select2 como

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

Para restablecer el select2

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

Select2 ha cambiado su API:

Select2: el select2("val")método 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 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:

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

Lo único que puede funcionar para mí es:

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

Estoy usando la versión 4.0.3

Referencia

De acuerdo con la documentación de Select2

Con Select2 versión 4.0.9 esto funciona para mí:

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

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

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

Y tiene la ventaja de que si tiene múltiples Select2 en la misma forma, todos se restablecerán con este solo comando.

Utilizar este :

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

PARA ELIMINAR EL VALOR SELECCIONADO

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

PARA BORRAR LOS VALORES DE OPCIÓN

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

Sé que esta es una pregunta antigua, pero 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

Use 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 entrada seleccionada mediante programación

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

Esta es la forma correcta:

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

Estoy usando la última versión de Select2.

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");

Puede borrar la selección por

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

Pero no volverá a su marcador de posición.

Entonces es una solución a medias

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

Este es un tipo de pirateo, 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();
});

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

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

Entonces, para restablecer el formulario, algunos de ustedes tendrán un botón de reinicio. Agregue el siguiente código dentro de la etiqueta del script

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

O simplemente para vaciar el campo de selección sin mantener un marcador de posición:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

Para el titular del lugar

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

Para restablecer un seleccione 2

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

Espero que esto ayude

Siguiendo la forma recomendada 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 espacio <option></option>en blanco como la 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 debe a val(null).trigger("change");un No select2/compat/inputDataerror antes de que el marcador de posición se restablezca. Lo resolví detectando el error y configurando el marcador de posición directamente (junto con un ancho). Nota: Si tiene más de uno, deberá 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

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á el primer elemento de opción en su lugar, 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.

He probado las 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 me funciona.

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

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

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

No necesité implementar initSelection

Después de probar las primeras 10 soluciones aquí y fallar, encontré que esta solución funcionaba (vea el comentario "nilov comentó 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);

Luego se realiza el cambio:

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

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

Use este código en su archivo js

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

Antes de borrar el valor con esta $("#customers_select").select2("val", ""); opción Intente establecer el foco en cualquier otro control al hacer clic en restablecer.

Esto mostrará el marcador de posición nuevamente.

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

Hacer lo siguiente es suficiente:

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

Bueno, cuando lo hice

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

Comencé a tener algún tipo de retraso después de unos tres o cuatro 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 retrasos.

Como tengo las opciones de AllowClear establecidas en true, elegí

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

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

Una forma [muy] hacky 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 debe establecerse en verdadero
• debe existir una opción vacía en el elemento seleccionado

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 tu primer valor del menú desplegable