"Select All" Button with AJAX data

How Do I...
#1

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!

#2

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.

#3

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/

#4

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

#5

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.

#6

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?

#7

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.