JQuery Select2 – 如何选择所有选项
我正在使用jQuery select2多选下拉列表。 我需要从代码的下拉列表中选择所有选项。 基本上有一个Select All复选框，必须在其上实现此function，我想从此复选框中选择/取消选择选项。
在github上的线程中有描述。 引用（ MortadaAK的 https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 ），它允许你选择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", ""); } } }); 使用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 All
您需要代码如DEMO2中所示，用于简单选择
$("#checkbox").click(function(){ if($("#checkbox").is(':checked') ){ $("select > option").prop("selected","selected"); }else{ $("select > option").removeAttr("selected"); } }); $("#button").click(function(){ alert($("select").val()); }); Select All
你可以做一个字符串
$('select.your-select option').attr('selected', true).parent().trigger('change')
从这里回答非常好。
// 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();
$(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'); } }); });
Select All
$('.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+CjxzdmcgeG') no-repeat center; background-size: contain; cursor: pointer; z-index: 999999; }
@Garath ：我已经调整了你发布的代码，以使其适用于通过ajax加载的结果。 谢谢你带来这个。
$(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", []); } } });
信息：gSiteIDs的值是最初动态创建选择选项时使用的值。 #selAllSites是复选框的ID，＃siteID是您要操作的选择列表的ID。
var gSiteIDs = "8475, 9082, 2387, 1234"; function selectAllSites() { if($("#selAllSites").is(":Checked")) { $("#siteID").select2("val", [gSiteIDs]); } else { $("#siteID").select2("val", []); } }
这适用于AJAX，阻止在FF（Ctrl-D）中打开书签窗口，并在closeOnSelect设置为关闭时正常工作。
$(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 = $( '' ); $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 ) }); });
源代码： http ： //jsbin.com/seqonozasu/1/edit？html，js，output