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.

回答1:

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", "");         }     } });

回答2:

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()); }); AlabamaAmalapuramAnakapalliAkkayapalemWyomingSelect All 

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()); });  VolvoSaabOpelAudiSelect All 

回答3:

you could do it for one string

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

回答4:

$(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');       }   }); });

Alabama     //AJAX created         Amalapuram  //AJAX created         Anakapalli  //AJAX created         Akkayapalem //AJAX created         Wyoming     //AJAX created     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

 Alabama     //AJAX created         Amalapuram  //AJAX created         Anakapalli  //AJAX created         Akkayapalem //AJAX created         Wyoming     //AJAX created     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.

回答5:

@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", []);         }     } });

回答6:

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", []);                                     } }           

回答7:

$('.select2').select2({   placeholder: 'Press CTRL+A for selecr or unselect all options' });  $('.select2[multiple]').siblings('.select2-container').append('');  $(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 id = that.parents("span[class*='select2-container']").siblings('select[multiple]').attr('id');   var item = $("#" + id);    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).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; 	}

Option 1Option 2Option 3Option 4

回答8:

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();

回答9:

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

回答10:

$.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 = $(             'Select All'         );          $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

转载请标明出处:JQuery Select2 - How to select all options

文章来源: JQuery Select2 - How to select all options