J'ai besoin d'ajouter “Ajouter un nouvel élément” option dans Select2

  $('#my-select2').select2().on('select2:open', function () {
            var a = $(this).data('select2');
            if (!$('.select2-link').length) {
                a.$results.parents('.select2-results')
                        .append('<div class="select2-link"><a>New item</a></div>')
                        .on('click', function (b) {
                            a.trigger('close');

                            //add your code
                        });
      }
   });

OriginalL'auteur Patrick Otto

Peut-être vous devriez utiliser tags options?

https://select2.github.io/options.html#can-options-be-created-based-on-the-search-term

OriginalL'auteur Shrike

Après creuser autour sur ce sujet depuis un certain temps... je pense j'ai une solution pour ce problème.

J'ai remarqué que Select2 semble être la création de sa propre structure dans les DOM-indépendamment de la sélection que vous interagissez avec. -- Cela semble également être complètement indépendant de la sélection que vous avez créé ailleurs dans le DOM.

.... Après quelques bidouiller - je suis venu avec le code suivant:

Première: Créer un global contraignant pour tous les Sélectionne dans les DOM. Ce n'est que pour le réglage temporaire de la référence à "quoi" de l'utilisateur courant est travailler avec, de créer une variable globale qui peut être utilisé plus tard.

      $('select').select2().on('select2:open', function() {
                        //set a global reference for the current selected Select
                        console.log('found this ---> '+$(this).attr('id'));
                        if (typeof tempSelectedObj === 'undefined') {
                            tempSelectedObj = null;
                        }
                        tempSelectedObj = this;
                    });

Deuxième: Créer un document 'keyup' événement qui est mappé à la Select2 temporaire d'ENTRÉE et de choisir 2-recherche__classe de champ. Cela permettra de capturer tous les événements clés de la Select2 d'ENTRÉE. Mais dans ce cas, j'ai ajouté un keyCode === 13 (retour chariot) à init de la magie.

    $(document).on('keyup','input.select2-search__field',function (e) {
                    //capture the return event
                    if (e.keyCode === 13) {

                        var newValue = $(this).val();
                        console.log('processing this: '+newValue);

                        //create new option element
                        var newOpt = $('<option>')
                            .val(newValue)
                            .text(newValue);

                        //append to the current Select
                        $(tempSelectedObj)
                            .append(newOpt);

                        //apply the change and set it
                        $(tempSelectedObj)
                            .val(newValue)
                            .select2('close');
                    }
                })

Lorsqu'un caractère de retour est détecté, celui-ci se produit.

• de capture de la valeur actuelle
• créer un nouveau DOM Élément Option (jQuery)
• définir la valeur et le texte de la nouvelle Option Élément
• ajouter le nouvel Élément à la tempSelectedObj variable (jQuery)
• déclencher la Select2 pour fermer
• définir la valeur de la Select2 à la nouvelle valeur ajoutée
• déclencher la finale Select2 modifier pour afficher la nouvelle Option
• FAIT!

Évidemment les deux sections de code sont nécessaires pour cet exemple, mais je pense que c'est une jolie nappe de l'approche pour un problème que beaucoup de gens semblent être aux prises avec. Et il est suffisamment générique qu'il pourrait être adapté à d'autres fins avec facilité.

Espérons que cette aide! J'ai lutté avec cette pendant un certain temps.

Ici est un exemple:

https://jsfiddle.net/h690bkmg/1/

OriginalL'auteur David Bigelow