web-dev-qa-db-fra.com

Select2 n'affiche pas la valeur sélectionnée

Select2 charge tous les éléments de ma liste avec succès, le problème que j'ai trouvé lorsque j'essaie de sélectionner une valeur spécifique lors du chargement de la page. Exemple:

:: placez select2 dans un élément html spécifique, aucune valeur n'est sélectionnée même tous les éléments sont chargés.

$('#my_id').select2();

:: Lorsque la page est chargée, j'essaie d'afficher un élément spécifique sélectionné mais ne fonctionne pas comme prévu, car même sélectionné, le select2 ne l'affiche pas.

$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.

Comment faire apparaître une option sélectionnée lors du chargement des pages?

Merci d'avance.

MIS À JOUR

:: Comment je charge tous les éléments select2 (désolé, c'est du jade, pas du HTML pur):

label(for='category') Category
    span.required *
select(id='category', style='width:230px', name='category')
    option(value='') - Select -
    each cat in categories
        option(value='#{cat.id}') #{cat.description}

P.S .: Tous les éléments de ma liste sont chargés.

:: Comment j'initialise le select2:

Il suffit de mettre le code de ligne suivant sur mon javascript et il réussit:

$('#category').select2();

:: Comment j'essaie de sélectionner une valeur spécifique:

  • Premier essai:

    $('#category').select2(
    {
        initSelection: function(element, callback) {
            callback($('#field-category').val());
        }
    }
);

  • Deuxième essai:

    $('#category').val($('#field-category').val());

P.S .: #field-category a une valeur c'est un champ de saisie caché et fonctionne bien.

Merci les gars!

jquery-select2
33
Ito

Vous devez utiliser l’option initSelection pour définir la valeur initiale. 

Si vous utilisez un élément select prédéfini pour créer le select2, vous pouvez utiliser la méthode suivante

$('select').select2().select2('val','3')

Démo: Fiddle

49
Arun P Johny

ajoutez un changement de déclencheur après avoir défini val:

$('#my_id').val('3').trigger('change');
26
Kokizzu

Un moyen très simple de résoudre ce problème est: 

//Step1: Here assuming id of your selectbox is my_id, so this will add selected attribute to 1st option
$('#my_id option').eq(0).prop('selected',true);

//Step2: Now reinitialize your select box

//This will work, if you haven't initialized selectbox
$('#my_id').select2();

ou

//This will work, if you have initialized selectbox earlier, so destroy it first and initialise it
$('#my_id').select2('destroy').select2();
2
Raj Soni

Per here initSelection est obsolète dans Select2 4.0 et versions ultérieures.

Utiliser Select2 4.0.0 a fonctionné pour moi:

$('#my_id').select2({val:3});

HT: @Kokizzu

0
Patrick

Pour moi, j'envoyais sélectionné dans le jeu de données mais l'option par défaut n'était toujours pas sélectionnée. Je devais faire quelque chose comme ci-dessous pour que cela fonctionne -

$(".select").select2({
    data: data_names
});
data_names.forEach(function(name) {
    if (name.selected) {
        $(".select").select2('val', name.id);
    }
});
0
Aniket Thakur

Cela peut aider:

$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed

Vous pouvez trouver plus d'informations ici :

Merci

0
sushil adhikari

Voici comment faire val dans select2, il suffit de sélectionner l’élément correspondant ..__ Pour une raison quelconque, select2 ne fournit pas la fonction permettant de rechercher des sélections par id.

init:

$("#thing").select2({data:sources, initSelection: function(item, callback) {
  // despite select2 having already read the whole sources list when you 
  // do .val(n) you have to explicitly tell it how to find that item again.
  var to_be_selected = null;
  $.each(sources, function(index, thing) {
    if (thing.id == item.val()) {
      to_be_selected = thing;
      return;
    }
  })
  callback(to_be_selected);
}})

code normal

// to load the thing with id==3 from the initial sources list.
$("#thing").select2({'val': 3})
0
fastmultiplication

Je rencontre le même problème, ça marche pour moi ：

Using Select2 4.0.0
$("#slect_id").val('3').trigger("change")
0
mmary