JQuery Select2 - How to select all options

I'm using jQuery select2 multi select dropdown. I need to select all options in a dropdown from code. Basically there is a Select All checkbox on which this functionality has to be implemented, I want to select/deselect options from this checkbox.

using Select 2 DEMO

$("#e1").select2();
$("#checkbox").click(function(){
    if($("#checkbox").is(':checked') ){
        $("#e1 > option").prop("selected","selected");// Select All Options
        $("#e1").trigger("change");// Trigger change to select 2
    }else{
        $("#e1 > option").removeAttr("selected");
        $("#e1").trigger("change");// Trigger change to select 2
     }
});

$("#button").click(function(){
       alert($("#e1").val());
});
<select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
<input type="checkbox" id="checkbox" >Select All

<input type="button" id="button" value="check Selected">

You need code As shown in DEMO2 for Simple Select

$("#checkbox").click(function(){
    if($("#checkbox").is(':checked') ){
        $("select > option").prop("selected","selected");
    }else{
        $("select > option").removeAttr("selected");
     }
});

$("#button").click(function(){
       alert($("select").val());
});

<select multiple size=2>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> <input type="checkbox" id="checkbox" >Select All

<input type="button" id="button" value="check Selected">

Answer from here works pretty good.

// Select all
$('#select-id').select2('destroy').find('option').prop('selected', 'selected').end().select2();

// Unselect all
$('#select-id').select2('destroy').find('option').prop('selected', false).end().select2();

There is a description in thread on github. Quoting (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 by MortadaAK) which allows you to select everything on ctrl+a

$(document).on("keypress",".select2-input",function(event){
    if (event.ctrlKey || event.metaKey) {
        var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_","");
        var element =$("#"+id);
        if (event.which == 97){
            var selected = [];
            element.find("option").each(function(i,e){
                selected[selected.length]=$(e).attr("value");
            });
            element.select2("val", selected);
        } else if (event.which == 100){
            element.select2("val", "");
        }
    }
});

$(document).ready(function() {
    $("#checkbox").click(function(){
      if($("#checkbox").is(':checked') ){ //select all
        $("#e1").find('option').prop("selected",true);
        $("#e1").trigger('change');
      } else { //deselect all
        $("#e1").find('option').prop("selected",false);
        $("#e1").trigger('change');
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>     //AJAX created
        <option value="Am">Amalapuram</option>  //AJAX created
        <option value="An">Anakapalli</option>  //AJAX created
        <option value="Ak">Akkayapalem</option> //AJAX created
        <option value="WY">Wyoming</option>     //AJAX created
    </select>
    <input type="checkbox" id="checkbox" >Select All

If options are created after AJAX request then these options don't work. So we map them with find and select/unselect them , after that trigger change.

HTML

 <select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>     //AJAX created
        <option value="Am">Amalapuram</option>  //AJAX created
        <option value="An">Anakapalli</option>  //AJAX created
        <option value="Ak">Akkayapalem</option> //AJAX created
        <option value="WY">Wyoming</option>     //AJAX created
    </select>
    <input type="checkbox" id="checkbox" >Select All

JS

$(document).ready(function() {
    $("#checkbox").click(function(){
      if($("#checkbox").is(':checked') ){ //select all
        $("#e1").find('option').prop("selected",true);
        $("#e1").trigger('change');
      } else { //deselect all
        $("#e1").find('option').prop("selected",false);
        $("#e1").trigger('change');
      }
  });
});

just use find.

you could do it for one string

$('select.your-select option').attr('selected', true).parent().trigger('change')

$(document).ready(function() {
	$("#my-select").select2();
});

function selectAll() {
	$("#my-select > option").prop("selected", true);
	$("#my-select").trigger("change");
}

function deselectAll() {
	$("#my-select > option").prop("selected", false);
	$("#my-select").trigger("change");
}

.button-container {
  margin-bottom: 10px;
}

#my-select {
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>

<div class="button-container">
  <button type="button" onclick="selectAll()">Select All</button>
  <button type="button" onclick="deselectAll()">Deselect All</button>
</div>
<select id="my-select" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="grape">Grape</option>
  <option value="pineapple">Pineapple</option>
</select>

This is the most simple way

function selectAll() {
  $("#my-select > option").prop("selected", true);
  $("#my-select").trigger("change"); 
}

$('.select2').select2({
  placeholder: 'Press CTRL+A for selecr or unselect all options'
});

$('.select2[multiple]').siblings('.select2-container').append('<span class="select-all"></span>');

$(document).on('click', '.select-all', function (e) {
  selectAllSelect2($(this).siblings('.selection').find('.select2-search__field'));
});

$(document).on("keyup", ".select2-search__field", function (e) {
  var eventObj = window.event ? event : e;
  if (eventObj.keyCode === 65 && eventObj.ctrlKey)
     selectAllSelect2($(this));
});
        
        
function selectAllSelect2(that) {

  var selectAll = true;
  var existUnselected = false;
  var item = $(that.parents("span[class*='select2-container']").siblings('select[multiple]'));

  item.find("option").each(function (k, v) {
      if (!$(v).prop('selected')) {
          existUnselected = true;
          return false;
      }
  });

  selectAll = existUnselected ? selectAll : !selectAll;

  item.find("option").prop('selected', selectAll);
  item.trigger('change');
}

.select2-container {
  width: 90% !important;
}

.select2-container .select-all {
		position: absolute;
		top: 6px;
		right: 4px;
		width: 20px;
		height: 20px;
		margin: auto;
		display: block;
		background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDc0LjggNDc0LjgwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc0LjggNDc0LjgwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTYuMjgzLDI1Ny4wOTdjLTEuMTQtMC41NzUtMi4yODItMC44NjItMy40MzMtMC44NjJjLTIuNDc4LDAtNC42NjEsMC45NTEtNi41NjMsMi44NTdsLTE4LjI3NCwxOC4yNzEgICAgYy0xLjcwOCwxLjcxNS0yLjU2NiwzLjgwNi0yLjU2Niw2LjI4M3Y3Mi41MTNjMCwxMi41NjUtNC40NjMsMjMuMzE0LTEzLjQxNSwzMi4yNjRjLTguOTQ1LDguOTQ1LTE5LjcwMSwxMy40MTgtMzIuMjY0LDEzLjQxOCAgICBIODIuMjI2Yy0xMi41NjQsMC0yMy4zMTktNC40NzMtMzIuMjY0LTEzLjQxOGMtOC45NDctOC45NDktMTMuNDE4LTE5LjY5OC0xMy40MTgtMzIuMjY0VjExOC42MjIgICAgYzAtMTIuNTYyLDQuNDcxLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ1LTguOTQ2LDE5LjctMTMuNDE4LDMyLjI2NC0xMy40MThIMzE5Ljc3YzQuMTg4LDAsOC40NywwLjU3MSwxMi44NDcsMS43MTQgICAgYzEuMTQzLDAuMzc4LDEuOTk5LDAuNTcxLDIuNTYzLDAuNTcxYzIuNDc4LDAsNC42NjgtMC45NDksNi41Ny0yLjg1MmwxMy45OS0xMy45OWMyLjI4Mi0yLjI4MSwzLjE0Mi01LjA0MywyLjU2Ni04LjI3NiAgICBjLTAuNTcxLTMuMDQ2LTIuMjg2LTUuMjM2LTUuMTQxLTYuNTY3Yy0xMC4yNzItNC43NTItMjEuNDEyLTcuMTM5LTMzLjQwMy03LjEzOUg4Mi4yMjZjLTIyLjY1LDAtNDIuMDE4LDguMDQyLTU4LjEwMiwyNC4xMjYgICAgQzguMDQyLDc2LjYxMywwLDk1Ljk3OCwwLDExOC42Mjl2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTI1LDU4LjA5OGMxNi4wODQsMTYuMDg4LDM1LjQ1MiwyNC4xMyw1OC4xMDIsMjQuMTNoMjM3LjU0MSAgICBjMjIuNjQ3LDAsNDIuMDE3LTguMDQyLDU4LjEwMS0yNC4xM2MxNi4wODUtMTYuMDg0LDI0LjEzNC0zNS40NSwyNC4xMzQtNTguMDk4di05MC43OTcgICAgQzQwMi4wMDEsMjYxLjM4MSw0MDAuMDg4LDI1OC42MjMsMzk2LjI4MywyNTcuMDk3eiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik00NjcuOTUsOTMuMjE2bC0zMS40MDktMzEuNDA5Yy00LjU2OC00LjU2Ny05Ljk5Ni02Ljg1MS0xNi4yNzktNi44NTFjLTYuMjc1LDAtMTEuNzA3LDIuMjg0LTE2LjI3MSw2Ljg1MSAgICBMMjE5LjI2NSwyNDYuNTMybC03NS4wODQtNzUuMDg5Yy00LjU2OS00LjU3LTkuOTk1LTYuODUxLTE2LjI3NC02Ljg1MWMtNi4yOCwwLTExLjcwNCwyLjI4MS0xNi4yNzQsNi44NTFsLTMxLjQwNSwzMS40MDUgICAgYy00LjU2OCw0LjU2OC02Ljg1NCw5Ljk5NC02Ljg1NCwxNi4yNzdjMCw2LjI4LDIuMjg2LDExLjcwNCw2Ljg1NCwxNi4yNzRsMTIyLjc2NywxMjIuNzY3YzQuNTY5LDQuNTcxLDkuOTk1LDYuODUxLDE2LjI3NCw2Ljg1MSAgICBjNi4yNzksMCwxMS43MDQtMi4yNzksMTYuMjc0LTYuODUxbDIzMi40MDQtMjMyLjQwM2M0LjU2NS00LjU2Nyw2Ljg1NC05Ljk5NCw2Ljg1NC0xNi4yNzRTNDcyLjUxOCw5Ny43ODMsNDY3Ljk1LDkzLjIxNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') no-repeat center;
		background-size: contain;
		cursor: pointer;
		z-index: 999999;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="select2" multiple id="my-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>

Info: The values for gSiteIDs are the values used when originally dynamically creating the select options. #selAllSites is the id of a checkbox and #siteID is the id of the select list you want to manipulate.

var gSiteIDs = "8475, 9082, 2387, 1234";

function selectAllSites() 
{
    if($("#selAllSites").is(":Checked")) {
	    $("#siteID").select2("val", [gSiteIDs]);								
    } else {
	    $("#siteID").select2("val", []);								
    }
}			

@Garath: I have tweaked your posted code in order to make it work with results that are loaded via ajax. Thank you for bringing this up here.

    $(document).on("keypress",".select2-input",function(event){
    if (event.ctrlKey || event.metaKey) {
        var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_","");
        var element =$("#"+id);
        if (event.which == 97){
            var selected = [];
            $('.select2-drop-active').find("ul.select2-results li").each(function(i,e){
                selected.push($(e).data("select2-data"));
            });
            element.select2("data", selected);
        } else if (event.which == 100){
            element.select2("data", []);
        }
    }
});

This works great with AJAX, prevents from opening Bookmarks window in FF (Ctrl-D), and works fine when closeOnSelect is set to off.

$(document).on("keypress",".select2-input",function(event){
    if (event.ctrlKey || event.metaKey) {
        var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_","");
        var element =$("#"+id);

        if (event.which == 97){
            var selected = [];
            $('.select2-drop-active').find("ul.select2-results li").each(function(i,e){
                selected.push($(e).data("select2-data"));
            });
            element.select2("data", selected);
            element.select2("focus");
            event.preventDefault();
        } else if (event.which == 100){
            element.select2("data", []);
            event.preventDefault();
        }
    }
});

$.fn.select2.amd.require([
	'select2/utils',
	'select2/dropdown',
	'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {
	function SelectAll() { }

	SelectAll.prototype.render = function (decorated) {
		var $rendered = decorated.call(this);
		var self = this;

		var $selectAll = $(
			'<button type="button" style="width: 100%; height: 3rem; text-align: left; color: blue; background: none; border: none; box-shadow: none">Select All</button>'
		);

		$rendered.find('.select2-dropdown').prepend($selectAll);

		$selectAll.on('click', function (e) {
			var $results = $rendered.find('.select2-results__option[aria-selected=false]');

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

			self.trigger('close');
		});

		return $rendered;
	};

	$("#select-id").select2({
		placeholder: "Select weekdays...",
		allowClear: true,
		dropdownAdapter: Utils.Decorate(
			Utils.Decorate(
				Dropdown,
				AttachBody
			),
			SelectAll
		)
	});
});

Source code: http://jsbin.com/seqonozasu/1/edit?html,js,output

just look this jsFiddle i created , sure this is the answer all you searched

Select2 Multiple dropdown with select all property

$(".checkbox").click(function(){
    if($(".checkbox").is(':checked') ){
        $(this).parent().find('option').prop("selected","selected");
        $(this).parent().find('option').trigger("change");
        $(this).parent().find('option').click();
        
    }else{
       $(this).parent().find('option').removeAttr("selected","selected");
       $(this).parent().find('option').trigger("change");
     }
});

$("#button").click(function(){
       alert($("select").val());
});

$(document).ready(function() {
    		  $('.select2').select2({
    			    closeOnSelect: false,
    			    allowClear:false
    		  });
    	  	});

<div>
<select multiple size=2 class="select2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> <input type="checkbox" class="checkbox" >Select All
</div>

<div>
<select multiple size=2 class="select2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> <input type="checkbox" class="checkbox" >Select All
</div>

Custom implementation of Select all in select2 DEMO

function RunSelect2(){
  $('#select-id').select2({
     allowClear: true,
     closeOnSelect: false,
  }).on('select2:open', function() {  

    setTimeout(function() {
        $(".select2-results__option .select2-results__group").bind( "click", selectAlllickHandler ); 
    }, 0);

  });
}

RunSelect2();


var selectAlllickHandler = function() {
	$(".select2-results__option .select2-results__group").unbind( "click", selectAlllickHandler );        
  $('#select-id').select2('destroy').find('option').prop('selected', 'selected').end();
  RunSelect2();
};

.select2-results__group
{
  cursor:pointer !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>

<select multiple id='select-id' style="width:300px">
    <optgroup label="select all">
      <option value='1'>1 one</option>
      <option value='2'>2 two</option>
      <option value='3'>3 three</option>
      <option value='4'>4 four</option>
      <option value='5'>5 five</option>
      <option value='6'>6 six</option>
    </optgroup>
</select>

If you need a checkbox for this action, just do this simply.

<select id="myselect" multiple="multiple">
  <option value="level1">Level 1</option>
  <option value="level2">Level 2</option>
  <option value="level3">Level 3</option>
  <option value="level4">Level 4</option>
</select>

<br/>
Select/Deselect <input type="checkbox" id="selectall"/>

Jquery function:

$("#selectall").on('click',function(){
	var checked = $("#selectall").prop("checked");
  if(checked==true){
  	$("#myselect > option").prop("selected",true);
  }else{
  	$("#myselect > option").prop("selected",false);
  }
});

Update 2019

To programmatically select an option/item for a Select2 control, use the jQuery .val() method.

You can also pass an array to val make multiple selections:

$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change');

https://select2.org/programmatic-control/add-select-clear-items#selecting-options

Change

$result.data('data');

to

Utils.GetData($result.get(0),'data')

This line of code will select all options

$('select.select-all-class-name').attr('selected', true).parent().trigger('change');

Add select events to work for all scenarios. The above line fails in a scenario, when you select and deselect an option and then click on selectAll. The last deselected option will not get selected. In order to fix that Add the below line of code.

//Select options selected true for the selected option
$('#mySelect2').on('select2:selecting', function (e) {
    $('select#mySelect2ID > option[value="'+e.params.args.data.id+'"]').attr('selected', true);
});

//DeSelect options selected to false for the option deselected
$('#mySelect2').on('select2:unselecting', function (e) {
    $('select#mySelect2ID > option[value="'+e.params.args.data.id+'"]').attr('selected', false);
});

Please see below code.

$('.select2').select2({
    formatResult:function(object, container, query){
        if(object.id=='all' || object.id=='clear')
            return '<span style="color:#31708F;font-size:10px;"><i class="fa fa-chevron-right"></i> '+object.text+'</span>';

        return object.text;
    }
});
$('.select2').on("change", function(e) {
    if($.inArray('all', e.val)===0){
        var selected = [];
        $(this).find("option").each(function(i,e){
            if($(e).attr("value")=='all' || $(e).attr("value")=='clear')
                return true;

            selected[selected.length]=$(e).attr("value");
        });
        $(this).select2('val',selected);
    }else if($.inArray('clear', e.val)===0){
        $(this).select2('val','');
    }
});

Reference from: https://github.com/select2/select2/issues/195#issuecomment-52163095