Redefinir o valor select2 e mostrar o espaço reservado

Como definir o espaço reservado na redefinição de valor por select2. No meu exemplo Se clicamos em locais ou caixas de seleção de classificação e meu select2 tem um valor que o valor de select2 deve redefinir e mostrar o espaço reservado padrão. Este script está redefinindo o valor, mas não mostra o espaço reservado

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

Você deve definir o select2 como

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

Para redefinir o select2

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

Select2 alterou sua API:

Select2: o select2("val")método foi descontinuado e será removido nas versões posteriores do Select2. Use $ element.val ().

A melhor maneira de fazer isso agora é:

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

Edit: December 2016 Os comentários sugerem que o seguinte é a maneira atualizada de fazer isso:

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

A resposta aceita não funciona no meu caso. Estou tentando isso e está funcionando:

Defina select2:

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

ou

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

Reiniciar:

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

ou

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

A única coisa que pode funcionar para mim é:

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

Estou usando a versão 4.0.3

Referência

De acordo com a documentação Select2

Com o Select2 versão 4.0.9, isso funciona para mim:

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

O Select2 usa uma classe CSS específica, portanto, uma maneira fácil de redefini-la é:

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

E você tem a vantagem de, se você tiver vários Select2 no mesmo formulário, todos eles serão redefinidos com este único comando.

Usa isto :

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

PARA REMOVER O VALOR SELECIONADO

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

PARA LIMPAR OS VALORES DA OPÇÃO

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

Eu sei que essa é uma pergunta antiga, mas isso funciona para a select2 versão 4.0

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

ou

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

se você tiver eventos de alteração vinculados a ele

Use o seguinte para configurar o select2

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

E para limpar a entrada selecionada programaticamente

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

Esta é a maneira correta:

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

Estou usando a versão mais recente do Select2.

Primeiramente, você deve definir select2 como este:

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

Para redefinir o select2, basta usar o seguinte bloco de código:

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

Você pode limpar a seleção te

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

Mas isso não o levará de volta ao seu espaço reservado.

Então é meia solução

Eu tentei as soluções acima, mas não funcionou para mim.

Este é um tipo de hack, onde você não precisa acionar alterações.

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

ou

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

Para usuários que carregam dados remotos, isso redefinirá o select2 para o espaço reservado sem disparar o ajax. Funciona com a v4.0.3:

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

Portanto, para redefinir o formulário, alguns de vocês terão um botão de redefinição. Adicione o seguinte código dentro da tag de script

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

Ou apenas para esvaziar o campo de seleção sem manter um espaço reservado:

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

Para o espaço reservado

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

Para redefinir uma seleção 2

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

Espero que isto ajude

Seguindo a maneira recomendada de fazê-lo. Encontrado na documentação https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (este parece ser um problema bastante comum):

Quando isso acontece, geralmente significa que você não tem um espaço <option></option>em branco como primeira opção no seu <select>.

como em:

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

Eu também estava tendo esse problema e ele decorre de val(null).trigger("change");um No select2/compat/inputDataerro antes que o espaço reservado seja redefinido. Resolvi o problema capturando o erro e definindo o espaço reservado diretamente (junto com uma largura). Nota: Se você tiver mais de um, precisará capturar cada um.

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

Estou executando o Select2 4.0.3

a partir da v.4.0.x ...

para limpar os valores, mas também restaurar o espaço reservado use ...

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

se estiver vazio, ele selecionará o primeiro item de opção que pode não ser o que você deseja

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

francamente ... Select2 é uma dor de bunda, me surpreende que não tenha sido substituído.

Eu tentei as soluções acima, mas nenhuma funcionou com a versão 4x.

O que eu quero alcançar é: limpe todas as opções, mas não toque no espaço reservado. Este código funciona para mim.

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

Usando select2 versão 3.2, isso funcionou para mim:

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

Não precisava implementar initSelection

Depois de tentar as 10 primeiras soluções aqui e falhar, achei que essa solução funcionava (consulte o comentário "nilov comentou em 7 de abril • editado" na 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);

A alteração é então feita:

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

(O autor mostrou originalmente var $select = $(this[1]);, para o qual um comentarista corrigiu var $select = $(this[0]);, que mostro acima.)

Use este código em seu arquivo js

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

Antes de limpar o valor usando este $("#customers_select").select2("val", ""); Tente definir o foco para qualquer outro controle ao clicar em redefinir.

Isso mostrará o espaço reservado novamente.

A interface DOM, já acompanha o estado inicial ...

Portanto, basta fazer o seguinte:

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

Bem, sempre que eu fazia

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

Comecei a ter algum tipo de atraso depois de três a quatro gatilhos. Suponho que haja um vazamento de memória. Não está dentro do meu código, porque se eu remover essa linha, meu aplicativo ficará sem atraso.

Como tenho as opções allowClear definidas como true, fui com

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

Isso pode ser seguido por um $ ('myselectdropdown'). Select2 ('close'); gatilho de evento no elemento select2 dom, caso você queira fechar a sugestão aberta.

Uma maneira [muito] hacky de fazer isso (eu vi funcionar para a versão 4.0.3):

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

• allowClear deve ser definido como true
• uma opção vazia deve existir no elemento select

Minha solução é:

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

onde 0 é o seu primeiro valor do menu suspenso