"Select All" Button with AJAX data

Hi,
i need to add a “Select All” button in a select2 multiple select, the functionality should be to select all the current results in the dropdown.

I tried to follow the example https://jsfiddle.net/hula_zell/50v60cm6/1/, but apparently the result items don’t carry the correct data attribute in this case, in particular, this part of the example doesn’t work:

  // Get all results that aren't selected
  $results.each(function() {
    var $result = $(this);

    // Get the data object for it
    var data = $result.data('data');

    // Trigger the select event
    self.trigger('select', {
      data: data
    });
  });

the $result.data(‘data’) just returns undefined, calling $result.data() returns for example { select2Id: 13 }. Is there a way to set the actual results from this information?

Note: based on comment: https://github.com/select2/select2/issues/195#issuecomment-401532685, moving here because the forum seems to be a better place to discuss issues like this.

Thanks in advance!

The example in the fiddle works just fine (I just tried it). Perhaps you’ve copied the example wrong. Can you put your code up on jsfiddle or codepen so I can take a look?

In the meantime, you should confirm that your $results variable contains an array of jQuery objects. Try console.log($results); and inspect that array/object to see if it has the contents you expect it to have. It should be a list of the unselected li items in the Select2 dropdown.

I’ve forked the jsfiddle example to add some console logging. You can use this as a reference to compare to what you’re seeing in your logging output.

Hi, thanks for the reply, my bad, the explanation wasn’t complete, here is a fiddle of what i am trying to do (it’s an AJAX select2): https://jsfiddle.net/meddario/y1ja2fzs/

I’ve played around with your fiddle quite a bit, and compared the rendered Select2 widget you get to the one in the original SelectAll example, and the main difference I see is that the <li> elements in your Select2 widget do not have id attributes, whereas the <li>s in the SelectAll example do.

At first I thought this might be due to you getting your data via AJAX, but I replaced your AJAX data with hard-coded <option> elements in your <select>, and it made no difference—the rendered <li> still didn’t have id attributes. However, I couldn’t figure out why. But it’s clear that the Select2 code expects its items to have id attributes, because it fails on a line in the code that tries to convert the id value to a string. So I think you need to figure out why the rendered <li> elements do not have an id attribute. (Note: it’s possible this is a bug—either the lack of the id attribute, or more likely, the fact that the Select2 code doesn’t fall back to the select2-data-id attribute if there isn’t an id attribute. I’ve looked at other examples in the Select2 documentation, and only widgets initialized from hard-coded <option>s have id attributes; yet the Select2 code seems to rely on the id attribute being present. If that’s the case, you may have no choice but to file a bug report.)

I’ve narrowed it down to a breaking change in a minor version of Select2.

https://jsfiddle.net/gpv6q04m/ => Select2 4.0.0
https://jsfiddle.net/zhv8y276/ => Select2 4.0.13 (latest at this time)

I’m not sure what changed in the Select2, but downgrading from 4.0.6 all the way back to 4.0.0 makes the ajax demo work.

I posted this here because several of my debugging searches kept linking me here. Hopefully someone can take further action on this.

Hi, dropping into this thread as i also ran into this problem.

This issue occurs from 4.0.6 onwards because the $.data() way of accessing was removed in favor of an internal cache: https://github.com/select2/select2/pull/4346

This leaves me with the issue - as described above - of not being able to implement a way to select all items in the select2 list starting at version 4.0.6. I really want to use 4.0.6 for the clear/clearing events.

Where do i go from here? How do i go about implementing a way to select all options?

Hi, is there a way to add unselect all button?

I dropped version 4 and used version 2 and it worked but need a unselect button.