Select2: comment définir les données après init?
j'ai besoin de définir un tableau de données après l'initialisation des select2. Je tiens donc à faire quelque chose comme ceci:
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 permise pour Select2 lorsqu'elle est attachée à un élément.;
mon HTML:
<select id="select" class="chzn-select"></select>
Que dois-je utiliser à la place d'un élément select?
je dois définir la source des articles pour la recherche
5 réponses
onload:
$.each(data, function(index, value) {
$('#selectId').append(
'<option value="' + data[index].id + '">' + data[index].value1 + '</option>'
);
});
<input type="hidden"> élément et lier select2. Utiliser. select2 sur une boîte de sélection régulière ne vous permet pas de jouer avec les données, il vous donne juste la plupart du temps L'UI et les méthodes de post-sélection.
Source: Select2 Documentation
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');
Effacer les éléments:
$('#mySelect2').val(null).trigger('change');
pour v4 vous devrez détruire et reconstruire select2 avec des données mises à jour. Cochez https://github.com/select2/select2/issues/2830
j'ai récemment eu le scénario où changer un objet select2 modifie le contenu d'un second (regroupement parent - enfant effectivement). J'ai utilisé un appel ajax pour récupérer un nouvel ensemble de données Json, qui a ensuite été repris par le deuxième select2 objet. 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 l'ensemble précédent de données dans la deuxième select 2. Espérons que cette aide.