Select2: comment paramétrer les données après init?

Question

Je dois définir un tableau de données après l'initialisation de select2. Donc, je veux faire quelque chose comme ceci:

var select = $('#select').select2({}); 
select.data([ 
    {id: 1, text: 'value1'}, 
    {id: 1, text: 'value1'} 
]); 

Mais je reçois l'erreur suivante:

Option 'data' is not allowed for Select2 when attached to a element.;

Mon HTML:

<select id="select" class="chzn-select"></select> 

Que dois-je utiliser au lieu d'un élément de sélection?

J'ai besoin de définir la source d'articles pour la recherche

Answer 1

En onload:

$.each(data, function(index, value) { 
    $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>' 
); 
}); 

Answer 2

Faire un élément <input type="hidden"> et lier select2 à cela. L'utilisation de .select2 sur une case de sélection normale ne vous permet pas de jouer avec les données, cela vous donne principalement les méthodes d'interface utilisateur et de post-sélection.

Source: Select2 Documentation

Answer 3

Pour v4, vous devrez détruire et reconstruire select2 avec des données mises à jour. Vérification https://github.com/select2/select2/issues/2830

Answer 4

J'ai récemment eu le scénario où la modification d'un objet select2 modifie le contenu d'un second (regroupement parent-enfant). J'ai utilisé un appel ajax pour récupérer un nouvel ensemble de données Json, qui a ensuite été récupéré par le second objet select2. J'ai inclus le code ci-dessous:

$("#group").on('change', function() { 
     var uri = "/Url/RetrieveNewResults"; 
     $.ajax({ 
      url: uri, 
      data: { 
       format: 'json', 
       Id: $("#group :selected").val() 
      }, 
      type: "POST", 
      success: function (data) { 
       $("#groupchild").html(''); 
       $("#groupchild").select2({ 
        data: data, 
        theme: 'bootstrap', 
        placeholder: "Select a Type" 
       }); 
      }, 
      error: function() { 
       console.log("Error") 
      } 
     }); 
    }); 

Je trouve que je devais inclure le $ (« # groupchild ») html (« ») pour effacer l'ensemble des données précédentes dans la deuxième select2. . J'espère que cela t'aides.

Answer 5

Source: https://select2.org/programmatic-control/add-select-clear-items

Ajouter un élément:

var data = { 
    id: 1, 
    text: 'Barn owl' 
}; 

var newOption = new Option(data.text, data.id, false, false); 
$('#mySelect2').append(newOption).trigger('change'); 

objets clairs:

$('#mySelect2').val(null).trigger('change');