JochenJung JochenJung - 5 months ago 14
jQuery Question

Change Select2 to display 'n of m items selected'

I like to use the Select2 plugin with tagging enabled, like in this example:
https://select2.github.io/examples.html#tags

However I would like to change it to display a text like


n of m items selected


when there are more than say 3 items selected. Once you click the box you would see the exact items, like it is now.

Then the select box could be rendered much smaller and consume less space.

This does not seem to be a config option. Do you have an idea, where in the code to change this behavior?

Answer

You can do it easy like this. No rape select2 is needed :)

$("#singleSelectExample").select2({
  closeOnSelect: false
});

$('#singleSelectExample').on('change', function() {
  var selected = $(this).val().length; 
  var of = $(this).find('option').length;
  $(this).parent().find('.select2-selection ul').html('Selected ' + selected + ' of ' + of + '  items.')
});

JSFIDDLE