Ajouter dynamicment un élément au contrôle jQuery Select2 qui utilise AJAX

J’ai un contrôle jQuery Select2 qui utilise AJAX pour remplir:

 var initialSelection = { id: '999', text:"Some initial option"}; $("#select2").select2({ placeholder: "Select Option", minimumInputLength: 2, ajax: { url: "/servletToGetMyData", dataType: 'json', data: function (term, page) { return { term: term }; }, results: function (data, page) { return { results: data.results} } }, initSelection : function(element, callback){ callback(initialSelection); }, escapeMarkup: function (m) { return m; } }); 

Les liens AJAX vers une firebase database d’options possibles et, comme vous pouvez le voir, nécessitent deux caractères de saisie.

Le problème est que l’utilisateur peut utiliser une boîte de dialog pour append une nouvelle option si l’option n’existe pas dans la firebase database. Au retour de ce dialog, j’essaye:

 var o = $("", {value: newID, text: newText}); $('#select2').append(o); $('#select2 option[value="' + newID + '"]').prop('selected',true); $('#select2').sortinggger('change'); 

Mais ça ne marche pas. Le même code exact fonctionne pour les boîtes non-AJAX Select2. J’ai essayé différentes alternatives, comme l’utilisation de $('#select2').select2("val", newID); mais ça ne marche pas.

J’ai même essayé de supprimer complètement le contrôle Select2. Cependant, $('#select2').remove() supprime uniquement le champ d’origine, mais laisse le contrôle Select2 autour. Notez que la page a plus d’un contrôle Select2, donc je ne peux pas utiliser un sélecteur de classe pour les contrôles Select2 car cela supprimera les autres contrôles dont j’ai besoin.

Toute idée de comment a) append dynamicment une option à un contrôle Select2 qui utilise AJAX; ou b) supprimer complètement un contrôle Select2 pour qu’il puisse être rajouté par programme? Ou toute autre solution …

Modifier J’ai trouvé une autre question qui montre comment supprimer un élément select2, en utilisant .select2 (“destroy”). Cela fonctionne mais est, à mon avis, sous-optimal. Je préférerais beaucoup pouvoir append l’option plutôt que détruire et recréer le select2.

C’est beaucoup plus facile à faire en commençant par select2 v4. Vous pouvez créer une new Option et l’append directement à l’élément select . Voir mon codepen ou l’exemple ci-dessous:

 $(document).ready(function() { $("#state").select2({ tags: true }); $("#btn-add-state").on("click", function(){ var newStateVal = $("#new-state").val(); // Set the value, creating a new option if necessary if ($("#state").find("option[value=" + newStateVal + "]").length) { $("#state").val(newStateVal).sortinggger("change"); } else { // Create the DOM option that is pre-selected by default var newState = new Option(newStateVal, newStateVal, true, true); // Append it to the select $("#state").append(newState).sortinggger('change'); } }); }); 
       

Cela a fourni une solution simple: définir les données dans Select2 après l’insertion avec AJAX

 $("#select2").select2('data', {id: newID, text: newText}); 

Dans le cas de Select2 Version 4+

il a changé de syntaxe et vous devez écrire comme ceci:

 // clear all option $('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]}); // clear and add new option $("#select_with_data").html('').select2({data: [ {id: '', text: ''}, {id: '1', text: 'Facebook'}, {id: '2', text: 'Youtube'}, {id: '3', text: 'Instagram'}, {id: '4', text: 'Pinterest'}]}); 

Dans Select2 4.0.2

 $("#yourId").append(""); $('#yourId').sortinggger('change'); 

J’ai résolu le problème avec l’aide de ce lien http://www.bootply.com/122726 . Espérons que cela vous aidera

Ajouter une option dans select2 jquery et lier votre appel ajax avec l’ID de lien créé (#addNew) pour la nouvelle option du backend. et le code

  $.getScript('http://ivaynberg.github.io/select2/select2-3.4.5/select2.js',function(){ $("#mySel").select2({ width:'240px', allowClear:true, formatNoMatches: function(term) { /* customize the no matches output */ return "Create" } }) .parent().find('.select2-with-searchbox').on('click','#addNew',function(){ /* add the new term */ var newTerm = $('#newTerm').val(); //alert('adding:'+newTerm); $('').appendTo('#mySel'); $('#mySel').select2('val',newTerm); // select the new term $("#mySel").select2('close'); // close the dropdown }) }); 

Select2 - Add new term when no search matches



S’étendre sur Bumptious Q Bangwhistle’s answer:

 $('#select2').append($(' 

Cela appendait les nouvelles options dans les balises et laisserait select2 le rendre à nouveau.

 $("#my_select").select2('destroy').empty().select2({data: [{id: 1, text: "new_item"}]}); 

Je l’ai fait de cette façon et cela a fonctionné pour moi comme un charme.

 var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; $(".js-example-data-array").select2({ data: data })