JQuery Select2 - Come selezionare tutte le opzioni

Question

Sto usando jQuery select2 multi selezione dropdown. Devo selezionare tutte le opzioni in un menu a discesa dal codice. Fondamentalmente c'è una casella di controllo Seleziona tutto su cui questa funzionalità deve essere implementata, Voglio selezionare/deselezionare opzioni da questa casella di controllo.

Answer 1

C'è una descrizione nel thread su github. Citando (https://github.com/ivaynberg/select2/issues/195#issuecomment-13489140 da MortadaAK), che consente di selezionare tutto su 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 2

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

È necessario il codice Come mostrato nella DEMO2 per 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 3

@Garath: Ho modificato il codice postato per farlo funzionare con i risultati caricati tramite ajax. Grazie per aver portato questo qui.

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

Info: i valori per gSiteIDs sono i valori utilizzati durante la creazione dinamica iniziale delle opzioni di selezione. #selAllSites è l'ID di una casella di controllo e #siteID è l'id dell'elenco di selezione che si desidera manipolare.

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

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

Answer 5

Questa grande opera con AJAX, impedisce finestra Preferiti apertura in FF (Ctrl-D), e funziona bene quando closeOnSelect è disattivata.

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

si potrebbe fare per una stringa

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

Answer 7

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

Se le opzioni vengono creati dopo richiesta AJAX allora queste opzioni non funzionano. Quindi li mappiamo con find e selezionali/deselezionandoli, dopo quel cambio di trigger.

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

basta usare trovare.

Answer 8

$('.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 { 
 
\t \t position: absolute; 
 
\t \t top: 6px; 
 
\t \t right: 4px; 
 
\t \t width: 20px; 
 
\t \t height: 20px; 
 
\t \t margin: auto; 
 
\t \t display: block; 
 
\t \t background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDc0LjggNDc0LjgwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc0LjggNDc0LjgwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTYuMjgzLDI1Ny4wOTdjLTEuMTQtMC41NzUtMi4yODItMC44NjItMy40MzMtMC44NjJjLTIuNDc4LDAtNC42NjEsMC45NTEtNi41NjMsMi44NTdsLTE4LjI3NCwxOC4yNzEgICAgYy0xLjcwOCwxLjcxNS0yLjU2NiwzLjgwNi0yLjU2Niw2LjI4M3Y3Mi41MTNjMCwxMi41NjUtNC40NjMsMjMuMzE0LTEzLjQxNSwzMi4yNjRjLTguOTQ1LDguOTQ1LTE5LjcwMSwxMy40MTgtMzIuMjY0LDEzLjQxOCAgICBIODIuMjI2Yy0xMi41NjQsMC0yMy4zMTktNC40NzMtMzIuMjY0LTEzLjQxOGMtOC45NDctOC45NDktMTMuNDE4LTE5LjY5OC0xMy40MTgtMzIuMjY0VjExOC42MjIgICAgYzAtMTIuNTYyLDQuNDcxLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ1LTguOTQ2LDE5LjctMTMuNDE4LDMyLjI2NC0xMy40MThIMzE5Ljc3YzQuMTg4LDAsOC40NywwLjU3MSwxMi44NDcsMS43MTQgICAgYzEuMTQzLDAuMzc4LDEuOTk5LDAuNTcxLDIuNTYzLDAuNTcxYzIuNDc4LDAsNC42NjgtMC45NDksNi41Ny0yLjg1MmwxMy45OS0xMy45OWMyLjI4Mi0yLjI4MSwzLjE0Mi01LjA0MywyLjU2Ni04LjI3NiAgICBjLTAuNTcxLTMuMDQ2LTIuMjg2LTUuMjM2LTUuMTQxLTYuNTY3Yy0xMC4yNzItNC43NTItMjEuNDEyLTcuMTM5LTMzLjQwMy03LjEzOUg4Mi4yMjZjLTIyLjY1LDAtNDIuMDE4LDguMDQyLTU4LjEwMiwyNC4xMjYgICAgQzguMDQyLDc2LjYxMywwLDk1Ljk3OCwwLDExOC42Mjl2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTI1LDU4LjA5OGMxNi4wODQsMTYuMDg4LDM1LjQ1MiwyNC4xMyw1OC4xMDIsMjQuMTNoMjM3LjU0MSAgICBjMjIuNjQ3LDAsNDIuMDE3LTguMDQyLDU4LjEwMS0yNC4xM2MxNi4wODUtMTYuMDg0LDI0LjEzNC0zNS40NSwyNC4xMzQtNTguMDk4di05MC43OTcgICAgQzQwMi4wMDEsMjYxLjM4MSw0MDAuMDg4LDI1OC42MjMsMzk2LjI4MywyNTcuMDk3eiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik00NjcuOTUsOTMuMjE2bC0zMS40MDktMzEuNDA5Yy00LjU2OC00LjU2Ny05Ljk5Ni02Ljg1MS0xNi4yNzktNi44NTFjLTYuMjc1LDAtMTEuNzA3LDIuMjg0LTE2LjI3MSw2Ljg1MSAgICBMMjE5LjI2NSwyNDYuNTMybC03NS4wODQtNzUuMDg5Yy00LjU2OS00LjU3LTkuOTk1LTYuODUxLTE2LjI3NC02Ljg1MWMtNi4yOCwwLTExLjcwNCwyLjI4MS0xNi4yNzQsNi44NTFsLTMxLjQwNSwzMS40MDUgICAgYy00LjU2OCw0LjU2OC02Ljg1NCw5Ljk5NC02Ljg1NCwxNi4yNzdjMCw2LjI4LDIuMjg2LDExLjcwNCw2Ljg1NCwxNi4yNzRsMTIyLjc2NywxMjIuNzY3YzQuNTY5LDQuNTcxLDkuOTk1LDYuODUxLDE2LjI3NCw2Ljg1MSAgICBjNi4yNzksMCwxMS43MDQtMi4yNzksMTYuMjc0LTYuODUxbDIzMi40MDQtMjMyLjQwM2M0LjU2NS00LjU2Nyw2Ljg1NC05Ljk5NCw2Ljg1NC0xNi4yNzRTNDcyLjUxOCw5Ny43ODMsNDY3Ljk1LDkzLjIxNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') no-repeat center; 
 
\t \t background-size: contain; 
 
\t \t cursor: pointer; 
 
\t \t z-index: 999999; 
 
\t }

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

risposta da here opere piuttosto bene.

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