with - JQuery Select2-Cómo seleccionar todas las opciones

select2 set selected value

Question

Estoy usando el menú desplegable de selección múltiple de jQuery select2. Necesito seleccionar todas las opciones en un menú desplegable desde el código. Básicamente, hay una casilla de verificación Seleccionar todo en la que se debe implementar esta funcionalidad. Quiero seleccionar / deseleccionar las opciones de esta casilla.

Answer 1

Esto funciona muy bien con AJAX, evita que se abra la ventana de Marcadores en FF (Ctrl-D) y funciona bien cuando closeOnSelect está desactivado.

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

Answer 2

Hay una descripción en el hilo en github. MortadaAK ( https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 por MortadaAK ) que le permite seleccionar todo en 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", "");
        }
    }
});

Answer 3

Información: Los valores para gSiteIDs son los valores utilizados al crear dinámicamente las opciones de selección. #selAllSites es el id de una casilla de verificación y #siteID es el id de la lista de selección que desea manipular.

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

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

Answer 4

La respuesta desde here funciona bastante bien.

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

Answer 5

podrías hacerlo por una cuerda

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

Answer 6

utilizando 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">

Necesita el código que se muestra en DEMO2 para 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 7

@Garath : He modificado tu código publicado para que funcione con los resultados que se cargan a través de ajax. Gracias por traer esto aquí.

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

Answer 8

<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

 <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

Si las opciones se crean después de la solicitud de AJAX, estas opciones no funcionan. Así que los mapeamos con encontrar y seleccionamos / deseleccionamos, después de ese cambio de activación.

HTML

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

JS

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

solo usa encontrar

Answer 9

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

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

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

Código fuente: http://jsbin.com/seqonozasu/1/edit?html,js,output