JQuery Select2 - How to select all options
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());
});
<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">
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());
});
<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 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();