How to Select All element of SELECT2

Select2 is very famous jquery plugin for HTML Select-control. Select2 also supports multi-value select boxes. Select2 is very easy to use and configurable.

Select2 provides you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Also, check out other tutorials of select2,

• Part 1 – How to Integrate Chosen in HTML dropdown list
• Part 2 – How to Select All element of SELECT2
• Part 3 – How to add Custom message into Select2

How To Apply Select2 On HTML Select Element

$("#selectId").select2();

as u can see, I have used select2() method on HTML dropdown which id is #selectId.

I will tell you how to select all elements of the multi-select box onClick() of a particular option, ie. if you have the option ‘all’ in a multi-select box and you need to select all elements of multi-select when the user select 'All' option.

Select All Options of select Box Using Select2

The following code needs to use select all options of the multi-select box,

$('#selectId > option').prop("selected",true);

Also trigger a change event if you want to reflect the changes on the interface too.

$('#selectId > option').prop("selected",true).trigger("change");

Clear All Selected Options

You can also clear all selected options.

$('#selectId > option').prop("selected",false).trigger("change");