Select2 jquery plugin zeige Anzahl der ausgewählten Elemente im Ergebnis anstelle der Tags

Question

Ich verwende Select2 jQuery Plugin.

https://select2.github.io/ Referenz

Wenn ich die mehr Drop-Down-Option verwenden. Das Ergebnis ausgewählter Elemente wird als Tags in einer Box angezeigt, aber ich möchte nur die Anzahl der ausgewählten Elemente anzeigen.

Ist es möglich, mit Select2 jQuery-Plugin

HTML

<select multiple style="width:100%"> 
    <option value="1">Name1</option> 
    <option value="2">Name2</option> 
    <option value="3">Name3</option> 
    <option value="4">Name4</option> 
    <option value="5">Name5</option> 
    <option value="6">Name6</option> 
    <option value="7">Name7</option> 
</select> 

JS

$('select').select2(); 

I ausgegeben werden soll, wie unten

anstelle von Tag wie Ausgabe.

Example working Fiddle

Answer 1

können Sie diesen Code hinzufügen, nachdem select2

$('select').on('select2:close', function (evt) { 
     var uldiv = $(this).siblings('span.select2').find('ul') 
     var count = $(this).select2('data').length 
     if(count==0){ 
      uldiv.html("") 
     } 
     else{ 
      uldiv.html("<li>"+count+" items selected</li>") 
     } 

Ref Initialisierung: jsfiddle
Verweis auf select2 Ereignisse: Here

Edit:
Wenn Sie ein angezeigt werden soll leer, wenn der Benutzer alles abwählt, Verwenden Diese Geige: here

Bearbeiten:
Aktualisiert, um Fehler in der Abwahl von Daten zu entfernen und änderte es zur Hauptantwort. Fiddle: here

Answer 2

Selektoren können sicherlich verbessert werden, aber als Blaupause scheint das Hinzufügen eines Counter-Elements zum Ändern und Verbergen der Tags so wie gewünscht zu funktionieren.

$('select').select2({closeOnSelect: false}).on("change", function(e) { 
 
    $('.select2-selection__rendered li:not(.select2-search--inline)').hide(); 
 
    $('.counter').remove(); 
 
    var counter = $(".select2-selection__choice").length; 
 
    $('.select2-selection__rendered').after('<div style="line-height: 28px; padding: 5px;" class="counter">'+counter+' selected</div>'); 
 
});

.counter{ 
 
    position:absolute; 
 
    top:0px; 
 
    right:5px; 
 
} 
 
.select2-search--inline{ 
 
    background-color:Gainsboro; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<select multiple style="width:100%" id="mySelect"> 
 
    <option value="1">Name1</option> 
 
    <option value="2">Name2</option> 
 
    <option value="3">Name3</option> 
 
    <option value="4">Name4</option> 
 
    <option value="5">Name5</option> 
 
    <option value="6">Name6</option> 
 
    <option value="7">Name7</option> 
 
</select>