web-dev-qa-db-fra.com

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

Je souhaite ajouter un bouton dans le premier élément de la liste à "Ajouter un nouvel élément". Si l'utilisateur clique sur ce bouton, je dois ouvrir une fenêtre contextuelle pour obtenir les commentaires des utilisateurs .. Comment faire cela dans le plugin select2? Y a-t-il des options par défaut pour ceci (ou) besoin de le personnaliser?

jqueryjquery-select2jquery-select2-4
6
Prabhakarank

en gros ce que Kld a suggéré, mais sans boutons supplémentaires si je comprends bien, OP veut utiliser la première option de select pour déclencher une nouvelle valeur modale. Il vérifie la valeur lorsque l'événement select2: close est déclenché et si "NEW" est sélectionné, demande la nouvelle valeur, ajoute à la fin de la case select et la sélectionne.

REMARQUE: j'ai désactivé la recherche en entrée et ajouté un espace réservé

$(function () {
  $(".select2")
  .select2({
    placeholder: 'Select type',
    width: '50%',
    minimumResultsForSearch: Infinity
  })
  .on('select2:close', function() {
    var el = $(this);
    if(el.val()==="NEW") {
      var newval = Prompt("Enter new value: ");
      if(newval !== null) {
        el.append('<option>'+newval+'</option>')
          .val(newval);
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="mySel" class="select2">
  <option></option>
  <option value="NEW">Add new type</option>
  <option>Car</option>
  <option>BUS</option>
  <option>TWO</option>
  <option>THREE</option>
</select>

4
moped

Voici mon approche

$('#select2')
    .select2()
    .on('select2:open', () => {
        $(".select2-results:not(:has(a))").append('<a href="#" style="padding: 6px;height: 20px;display: inline-table;">Create new item</a>');
})

 enter image description here

3
user2976753
jQuery("#select2-"+yourelementid+"-container").off().on('click',function(){
                        jQuery("#yourelementid"_add").remove();
                        jQuery("#select2-"+yourelementid+"-results").after("<div id='"+yourelementid+"_add' >optionnameforadding</div> ").promise().done(function(){
                            jQuery("#"+yourelementid+"_add").off().on('click',function(){
                            //  yourfunctionfordisplayingdiv
                            });
                        });
                    });

vous pouvez ajouter du contenu html après la liste ul - select2 - "+ yourelementid +" - results et faire tout ce que vous pourrez avec. il suffit de définir le résultat comme valeur de la zone de sélection 

vérifier l'image

1
user3405326
  $('#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
                        });
      }
   });

 enter image description here

1
Patrick Otto

Peut-être devriez-vous utiliser les options tags?

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

1
Shrike

Vous pouvez ajouter une nouvelle option au select2 de cette façon

$('button').click(function(){
  var value = Prompt("Please enter the new value");
  $(".mySelect")
    .append($("<option></option>")
    .attr("value", value )
    .text(value ));

})
1
Kld

Essayez ça ça marche pour moi

$('#yourDropdownId').select2({              
              ajax: {
                  url: productUrl, 
                  dataType: 'json',
                  data: function (params) {
                    var query = {
                      search: params.term,
                      page: params.page || 1
                    }

                    // Query parameters will be ?search=[term]&page=[page]
                    return query;
                  },processResults: function (data, params) {       
                      console.log(data)                                        
                          return {
                              results: $.map(data.items, function (item) {
                                  return {
                                      text: item.item_name,                        
                                      id: item.item_id
                                  }
                              })
                          };      
                  },    
                  cache: true,
                },language: {
                    noResults: function() {
                        return "<a  data-toggle='modal' data-target='#myModal' href='javascript:void();'>Open Model</a>";
                      }
                    },escapeMarkup: function (markup) {
                         return markup;
                    }


              });
0
Pavan Hukerikar