web-dev-qa-db-fra.com

Select2: comment définir les données après init?

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

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

Mais j'obtiens l'erreur suivante:

L'option 'data' n'est pas autorisée pour Select2 lorsqu'elle est attachée à un élément.

Mon HTML:

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

Que devrais-je utiliser à la place d'un élément sélectionné?

Je dois définir la source des éléments pour la recherche

javascriptjqueryjquery-select2
31
Erik

En charge:

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

Créez un élément <input type="hidden"> et liez select2 à cet élément. L'utilisation de .select2 sur une boîte de sélection standard ne vous permet pas de jouer avec les données, elle vous donne surtout la méthode de l'interface utilisateur et les méthodes de post-sélection.

Source: Select2 Documentation

11
Kelz

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

Ajouter un item:

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

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

Effacer les articles:

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

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

1
FranBran

J'ai récemment eu le scénario suivant: la modification d'un objet select2 modifie le contenu d'un second objet (groupes efficaces parents-enfants). J'ai utilisé un appel ajax pour récupérer un nouvel ensemble de données Json, qui a ensuite été capturé par le deuxième 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")
            }
        });
    });

J'ai trouvé que je devais inclure le $ ("# groupchild"). Html ('') afin d'effacer le jeu de données précédent dans le second select2. J'espère que cela t'aides.

1
daviderault