3

Is there any way to prevent multiple values from being displayed in select2?

What I need is that when the select is displayed, the selected values are shown but they are not shown in the select part (in the field where the placeholder is usually written).

I have looked in the documentation of the plugin but I can not find what is the option to get it.

The problem comes from the fact that having a large number of options selected, it makes the select is shown in two lines, so another solution could be that instead of showing the labels of the selected values, it simply shows a label with: "3 selected", "4 selected" as I have seen in other plugins.

4
  • Please create a snippet reproducing your question Sep 7, 2020 at 7:50
  • @IslamElshobokshy, I understand what you mean and I'm agree with you (SO is not a place to ask a question and copy the code) but it's hard to reproduce it just because I don't konw how to get it.
    – cooper
    Sep 7, 2020 at 8:32
  • Hi cooper, did my answer end up working for you? Nov 25, 2020 at 17:19
  • Hi Jason, I finally searched for other way of doing this.
    – cooper
    Nov 25, 2020 at 19:50

2 Answers 2

2

I might find other solutions to this problem such as increasing the width of the form field or restricting the number of items that can be selected. However, what you are looking for is definitely possible. You can listen on the select2:close event which will get triggered after the dropdown is closed (i.e. when you make a selection).

select2 has a sibling right next to your <select> element that looks like this:

<span class="select2 ...">

Contained within is an unordered list with all of the currently selected options displayed as individual list items. You can get the count of selected items and then modify the unordered list to contain a single list element showing the number of options selected:

$('#mySelect2').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>`;
  })
});

I added the select2-selection__choice class to match the style that the list item would normally have. Also this list is simply for display purposes and will not affect what gets submitted to your form.

You might need this capability on more than just a single item's close event, so it's better to make a generic function that can be called anywhere. You could even set a threshold so that the list is displayed as normal unless the number of selected items exceeds the threshold:

function select2UpdateNumSelected(selector, threshold = 0) {
  const $select = $(selector);
  const numSelected = $select.select2('data').length;

  // do nothing if the number of selections are at or below the threshold
  if (numSelected <= threshold) {
    return;
  }

  // display the number of selected items as a list item
  $select.next('span.select2').find('ul').html(function() {
    return `<li class="select2-selection__choice">${numSelected} selected</li>`;
  });
}

For example, this would behave like a normal select2 instance if 0, 1, or 2 items are selected, but as soon as 3 or more options are selected the display would change to 3 selected:

$('#mySelect2').on('select2:close', function() {
  select2UpdateNumSelected($(this), 2);
});

One final point. If you pre-populate your selections upon loading your page it will not automatically convert to the X selected message unless you also call the function on page load:

select2UpdateNumSelected('#mySelect2', 2);
0

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>`;
        })
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.