Select2 jquery plugin show number of selected items in the result instead of tags
Asked Answered
R

3

18

I am using Select2 jQuery Plugin.

https://select2.github.io/ for reference

When I am using the multiple dropdown option. The result of selected items is shown as tags in a box but, I just want to show the number of items selected.

Is it possible with 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 want output as below

enter image description here

instead of tag like output.

Example working Fiddle

Rhianna answered 29/7, 2016 at 6:54 Comment(6)
How do you gonna deselect elements, it you can't see them?Brecciate
@ Justinas 3. If you open the list and click on a selected item it deselects it.Orotund
@Brecciate - @ 8odoros is rightRhianna
Try bootstrap select picker silviomoreto.github.io/bootstrap-select/examplesOvercome
I guess something simple like that is not what you want jsfiddle.net/402ejhoy/1Orotund
@8odoros count is fine. but i dont want tags that selected I want only countRhianna
C
15

You can add this code after initializing 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: jsfiddle
Reference to select2 events: Here

Edit:
If you want to display a blank when user deselects everything, Use this fiddle: here

Edit:
Updated to remove flaw in deselection of data and changed it to main answer. Fiddle: here

Chaney answered 29/7, 2016 at 8:30 Comment(11)
There is an issue in this code. If you select something and click again in the top box it says "0 items selected" while keeping the selections.Orotund
@8odoros It's working fine is the jsfiddle.. It says 0 items selected because there are zero items selected.. Clicking on the same item again deselects it.. Shouldn't the user get to deselect selections?Chaney
@8odoros edited the answer and included a fiddle to clear the field if all items are deselectedChaney
Still not working correctly. Check this: Click an item (box says "1 item selected"). Click on the box (opens the list, highlights the selected item). Now, click again on the box (now says "0 items selected") but still if you click again the list opens and highlights the chosen item.Orotund
it is removing search input. I don't want it on close event because I am going to use closeOnSelect:falseRhianna
@8odoros Got you.. did a little googling and chnaged the fiddle accordingly.Chaney
@Rhianna You can use other select2 events as stated in the docs.. link to the doc is provided in the answerChaney
@PrasunJajodia and what about 'search input'. it is getting deletedRhianna
@Rhianna Could you clarify what 'search input' means? If you're saying that the selectbox is losing its values on submit, I checked in the fiddle, and it's still retaining selected valuesChaney
@PrasunJajodia jsfiddle.net/murli2308/402ejhoy see example. we have a search input field to search optionsRhianna
Let us continue this discussion in chat.Rhianna
O
6

Selectors can certainly be improved, but as a blueprint, adding a counter element on change and hiding the tags like this seems to work as asked.

$('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>
Orotund answered 29/7, 2016 at 10:40 Comment(3)
search input field is getting removed.Rhianna
you are showing count which is fine. But it is removing input field of search which I don't wantRhianna
This is updating every select2s on page.Mauromaurois
E
1

although the answer is given.

you can try this code. first initialize than on close call it.

   jQuery('.multi-select-pbwp').select2();
    $('.multi-select-pbwp').on('select2:close', function() {
        const $select = $(this);
        const numSelected = $select.select2('data').length;

        $select.next('span.select2').find('ul').html(function() {
            return `<li class="class="select2-selection__choice">${numSelected} selected</li>`;
        })
    });
Ervinervine answered 17/8, 2021 at 12:52 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.