JQuery Select2 — как выбрать все параметры

Описание есть в ветке на гитхабе. Цитирование (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 авторства MortadaAK), что позволяет вам выбирать все, нажав 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 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">

Вам нужен код Как показано в 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 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">

Ответ от здесь работает очень хорошо.

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

вы могли бы сделать это для одной строки

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

$(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

Если опции создаются после запроса AJAX, то эти опции не работают. Поэтому мы сопоставляем их с помощью find и выбираем/отменяем выбор после этого изменения триггера.

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

просто используйте найти.

$(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>

Это самый простой способ

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

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

Информация: значения gSiteID — это значения, используемые при первоначальном динамическом создании параметров выбора. #selAllSites — это идентификатор флажка, а #siteID — это идентификатор списка выбора, которым вы хотите управлять.

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 установлено значение 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
        )
    });
});

Исходный код: http://jsbin.com/seqonozasu/1/edit?html,js,output

просто посмотрите на этот jsFiddle, который я создал, уверен, что это ответ на все, что вы искали

Выбрать2 Несколько раскрывающихся меню с выбором всех свойств

$(".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>

Пользовательская реализация Select all в 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>

Если вам нужен флажок для этого действия, просто сделайте это.

<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-функция:

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

Обновление 2019

Чтобы программно выбрать параметр/элемент для элемента управления Select2, используйте метод jQuery .val().

Вы также можете передать массив val сделать множественный выбор:

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

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

Сдача

$result.data('data');

to

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

Эта строка кода выберет все параметры

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

Добавьте избранные события для работы во всех сценариях. Приведенная выше строка не работает в сценарии, когда вы выбираете и отменяете выбор параметра, а затем нажимаете selectAll. Последний невыбранный вариант не будет выбран. Чтобы исправить это, добавьте следующую строку кода.

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

Пожалуйста, смотрите код ниже.

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

Ссылка из: https://github.com/select2/select2/issues/195#issuecomment-52163095