CODEWITHSUNDEEP
jqueryjquery-select2
cooper
cooper

Reputation: 674

Select2 (jQuery). Prevent showing selected values in the multiple select

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.

Upvotes: 3

Views: 2375

Answers (2)

Arman H
Arman H

Reputation: 1754

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

Upvotes: 0

Jason Roman
Jason Roman

Reputation: 8276

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

Upvotes: 2

Related Questions