select2: contrôle par espace réservé

Je veux changer l'espace réservé sur un select2 améliorant contrôle lors d'un événement.

J'ai donc eu cette...

<select id="myFoo" placeholder="Fight some foo...">

...qui est ensuite renforcée:

init: function(){
   $('#myFoo').select2();
},

...alors maintenant, il a son bon emplacement réservé.

Mais ensuite, je tiens à réagir à un événement et claire de l'espace réservé...

someButtonPress: function(){
//  $('#myFoo').placeholder("");
//  $('#myFoo').attr('placeholder', "");
//  $('#myFoo').select2('placeholder',"");
//  $('#myFoo').select2({placeholder:""});
//  none of these work
}

Cela semble si fondamentale, pourtant, je suis perplexe.

Je ne peux pas trouver quelque chose dans les docs. Je cherche au mauvais endroit?

source d'informationauteur DaveC426913

  1. 10

    Mise à jour

    Si vous avez défini l'espace réservé via HTML data-placeholder attribut, vous avez besoin de changer et de ne pas l'option interne, de sorte qu'il sera comme Fabian H. suggère:

    $select.attr("data-placeholder", "New placeholder text");
$select.data("select2").setPlaceholder();

    Ou sinon, utiliser une option interne select2.opts.placeholder:

    var select2 = $select.data("select2");
select2.opts.placeholder = "New placeholder text";
select2.setPlaceholder();

    Ce n'est pas parfait bien sûr, mais bien mieux que le piratage select2 HTML généré.

    1. this.$select.data("select2") vous obtient l'interne select2 objet, de sorte que vous obtenez l'accès à ses propriétés et ses méthodes (et pas seulement à ceux exportés pour une utilisation à partir de l'extérieur)
    2. Prochaine je suis à jour le placeholder option interne ou en modifiant les données liées à l'attribut
    3. Enfin, je suis déclenchement méthode interne setPlaceholder qui définit la nouvelle placeholer.

    Espère que ça aide!

  2. 6

    si vous souhaitez modifier dynamiquement l'espace réservé, ne pas le mettre sur HTML

    <select id="myFoo">

    le mettre sur jQuery

    $('#myFoo').select2({
   placeholder: "your placeholder"
});

    puis la mise à jour comme ceci

    someButtonPress: function(){
$('#myFoo').select2({
    placeholder: "change your placeholder"
  });
}

    cela fonctionne pour moi, j'espère que ça aide.

  3. 4

    De mettre à jour l'espace réservé d'un Select2 avec des données à distance (AJAX/JSONP) utilisez ce code:

    $input = $("input#e7");
$input.attr("data-placeholder", "New placeholder");
var select2 = $input.data("select2");
select2.setPlaceholder();

    Crédits à Brocks réponse.

  4. 2

    Une autre façon de mettre à jour l'espace réservé est de définir le "placeholder" l'attribut de l'élément select, et d'appeler select2() de nouveau:

    $('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2();

    Souvenez-vous que si vous avez passé toutes les options de select2 la première fois, vous aurez besoin de passer de nouveau (ou il suffit de définir des options par défaut à l'aide de $.fn.select2.les paramètres par défaut).

  5. 0

    Je crois que le comportement va dépendre de la version de Select2 vous êtes aide – nous à l'aide de la v3.5.1 – mais j'ai dû prendre une approche légèrement différente pour obtenir l'espace réservé à changer sur demande. Dans mon cas, le sélecteur de modifications options présentées en fonction de la valeur d'un autre sélecteur, ce qui signifie que l'espace réservé doit changer avec le nouveau jeu de données.

    Pour obtenir que cela fonctionne, j'ai dû supprimer toute référence à un espace réservé dans le code HTML de l'élément d'entrée. 

    <input type="text" class="form-control span10">

    Puis, dans le Javascript, à chaque fois que j'ai chargé l'élément avec les bonnes options, j'ai eu à mettre à jour l'espace réservé via le data() fonction:

    selector.data('placeholder', placeholder);
selector.select2({ data: new_data_set, tags: true });

    Qui semble fonctionner à chaque fois maintenant.

  6. 0

    Je suis en utilisant Select2 4.0.5 Standard et les solutions existantes, soit n'ont pas de travail pour moi ou nécessaire de recréer la select2 pour chaque espace réservé à jour, ce que je voulais éviter.

    J'ai trouvé une nouvelle solution, même si c'est un hack. - Je stocker les select2 conteneur d'accéder facilement à plus tard, quand j'ai besoin de mettre à jour l'espace réservé-je trouver de l'espace réservé à l'élément à l'intérieur du conteneur et de la mise à jour de son texte:

    var selectorSelect2 = $('#selector').data('select2').$container;
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1');
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');
  7. 0

    Si vous êtes également en modifiant les options de manière dynamique, vous aurez besoin de fr la le d'attente d'un vide supplémentaire en option pour l'espace réservé à prendre effet. Par exemple:

    response.unshift({id: '', text: ''});
$('#elem).select2({placeholder: 'Select..', data: response});