web-dev-qa-db-fra.com

Réinitialiser la valeur select2 et afficher l'espace réservé

Comment définir l'espace réservé lors de la réinitialisation de la valeur avec select2. Dans mon exemple, si on clique sur des emplacements ou des zones de sélection de notes et que ma valeur de select2 est supérieure à celle de select2, elle devrait être réinitialisée et afficher l'espace réservé par défaut. Ce script réinitialise la valeur mais n'affiche pas l'espace réservé.

$("#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;
   }
});
jquerytwitter-bootstrapjquery-select2
169
fefe

Vous devez définir le select2 comme

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

Pour réinitialiser le select2

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

Select2 a changé leur API:

Select2: La méthode select2("val") est obsolète et sera supprimé dans les versions ultérieures de Select2. Utilisez $ element.val () à la place.

La meilleure façon de faire cela maintenant est:

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

Edit: December 2016 Les commentaires suggèrent que la manière ci-dessous est la mise à jour:

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

La réponse acceptée ne fonctionne pas dans mon cas. J'essaye ça et ça marche:

Définir select2:

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

ou

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

Réinitialiser:

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

ou

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

La seule chose qui puisse fonctionner pour moi est:

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

J'utilise la version 4.0.3

Référence

Selon la documentation Select2

34
M.Tae

Select2 utilise une classe CSS spécifique. Un moyen simple de la réinitialiser est la suivante:

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

De plus, si vous avez plusieurs Select2 dans le même formulaire, ils seront tous réinitialisés avec cette commande unique.

15
Marcio Mazzucato

Utilisez ceci :

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

SUPPRIMER LA VALEUR SÉLECTIONNÉE 

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

POUR EFFACER LES VALEURS D'OPTION 

$('#employee_id').html('');
10
Shanka SMS

Je sais que c'est un peu une vieille question, mais cela fonctionne pour la version 4.0 de select2

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

ou

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

si vous avez des événements de changement liés

7
Sean

Tout d'abord, vous devez définir select2 comme ceci:

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

Pour réinitialiser select2, vous pouvez simplement utiliser le bloc de code suivant:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");
5
Mahmut Aydın

C'est la bonne façon:

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

J'utilise la dernière version de Select2.

4
TreeZ

Vous pouvez effacer la sélection en

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

Mais cela ne vous ramènera pas à votre espace réservé.

Donc c'est une demi-solution

4
Rodrigo Butta

Utilisez ce qui suit pour configurer select2 

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

Et pour effacer l'entrée sélectionnée par programmation

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");
3
The Programmer- Zabith Rafeek

Pour les utilisateurs chargeant des données distantes, this réinitialisera select2 sur l’espace réservé sans déclencher ajax. Fonctionne avec v4.0.3:

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

Suivre la méthode recommandée de le faire. Trouvé dans la documentation https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (cela semble être un problème assez courant ):

Lorsque cela se produit, cela signifie généralement que vous n'avez pas un <option></option> vierge comme première option de votre <select>.

un péché:

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

J'avais aussi ce problème et cela provient du fait que val(null).trigger("change"); a généré une erreur No select2/compat/inputData avant que l'espace réservé ne soit réinitialisé. Je l'ai résolu en rattrapant l'erreur et en définissant le paramètre fictif directement (avec une largeur). Remarque: Si vous en avez plusieurs, vous devez les attraper.

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

Je suis en cours d'exécution Select2 4.0.3

2
Aba

à partir de v.4.0.x ...

pour effacer les valeurs, mais aussi restaurer l'utilisation de l'espace réservé ...

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

s'il est vide, le premier élément d'option sera sélectionné, ce qui peut ne pas être ce que vous voulez.

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

franchement ... Select2 est une telle douleur dans le cul, ça me surprend qu'il n'a pas été remplacé.

1
mangonights

Pour le titulaire

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

Pour réinitialiser une sélection 2

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

J'espère que cela t'aides 

1
Rinto George

Avec select2 version 3.2, cela a fonctionné pour moi:

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

N'a pas eu besoin d'implémenter initSelection

1
shak

Donc, pour réinitialiser le formulaire, certains d'entre vous auront un bouton de réinitialisation. Ajoutez le code suivant dans la balise script

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

Ou tout simplement pour vider le champ sélectionné sans conserver d'espace réservé:

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

J'ai essayé les solutions ci-dessus mais aucune ne fonctionnait avec la version 4x.

Ce que je veux réaliser est: effacez toutes les options mais ne touchez pas l’espace réservé Ce code fonctionne pour moi.

selector.find('option:not(:first)').remove().trigger('change');
1
R. Canser Yanbakan

J'ai essayé les solutions ci-dessus mais cela n'a pas fonctionné pour moi.

C'est une sorte de bidouille, où vous n'avez pas à déclencher de changement.

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

ou

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

Après avoir essayé les 10 premières solutions ici et échoué, j'ai trouvé cette solution qui fonctionnait (voir "nilov a commenté le 7 avril • édité", en bas de la page):

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

Le changement est alors effectué:

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

(L'auteur a initialement montré var $select = $(this[1]);, qu'un commentateur a corrigé pour var $select = $(this[0]);, ce que je montre ci-dessus.)

0
guero64

Utilisez ce code dans votre fichier js

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

L'interface DOM garde déjà trace de l'état initial ... 

Il suffit donc de: 

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

Ma solution est:

$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');
    });
0
Daniel Ortegón
$('myselectdropdown').select2('val', '0')

où 0 est votre première valeur du menu déroulant

0
Momaad Jamshed Alam

Bien chaque fois que je faisais 

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

J'ai commencé à avoir un retard après trois ou quatre déclencheurs. Je suppose qu'il y a une fuite de mémoire. Ce n'est pas dans mon code car si je supprime la cette ligne, mon application est libre de retard.

Depuis que j'ai les options allowClear définies sur true, je suis allé avec

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

Cela peut être suivi d'un $ ('myselectdropdown'). Select2 ('close'); déclencheur d’événement sur l’élément select2 dom au cas où vous voudriez fermer la liste déroulante des suggestions ouvertes.

0
Akhilesh Balachandder

Avant d'effacer la valeur à l'aide de cette $("#customers_select").select2("val", ""); Essayez de définir le focus sur tout autre contrôle lors de la réinitialisation, cliquez sur.

Cela montrera à nouveau l'espace réservé.

0
user2243380

Une façon très [très] astucieuse de le faire (je l'ai vu fonctionner pour la version 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClear doit être défini sur true
  • une option vide doit exister dans l'élément select
0
Ellery Newcomer

Je fais ceci pour ce cas:

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();
  1. Je change la valeur de sélection en vide
  2. Je retire le conteneur pour select2
  3. Rappelez select2
0
Scramble

Avec Select2 version 4.0.9, cela fonctionne pour moi:

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

Je ne sais pas si quelqu'un d'autre a vécu cela, mais une fois que le code a appuyé sur le déclencheur ('changer'), mon javascript vient de s'arrêter, de ne jamais revenir sous forme de déclencheur et le reste de la fonction n'a jamais été exécuté. 

Je ne suis pas assez familier avec le déclencheur jQuerys pour dire que cela est prévu pour pas. Je l'ai contourné en l'enveloppant dans un setTimeout, moche mais efficace.

0
rgvtim