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");
Thanks mate your post was really useful!