If you want to select all the child element when selecting the group name, using select2 this is the post for you. I have added the select All chcekbox also.
here is the html part you need to add.
<input type="hidden" id="fruitSelect" value="" style="width:300px;" /><br />
<br/><input type="checkbox" id="checkbox" />Select All
<br />
<button type="button" id="showValue">Show Value</button><br />
<br />
<div id="output">
</div>
add the following to the Javascript file, inside the $document.ready function.
var FRUIT_GROUPS = [
{
id: '',
text: 'Citrus',
children: [
{ id: 'c1', text: 'Grapefruit' },
{ id: 'c2', text: 'Orange' },
{ id: 'c3', text: 'Lemon' },
{ id: 'c4', text: 'Lime' }
]
},
{
id: '',
text: 'Other',
children: [
{ id: 'o1', text: 'Apple' },
{ id: 'o2', text: 'Mango' },
{ id: 'o3', text: 'Banana' }
]
}
];
$('#fruitSelect').select2({
multiple: true,
placeholder: "Select fruits...",
data: FRUIT_GROUPS,
query: function(options) {
var selectedIds = options.element.select2('val');
var selectableGroups = $.map(this.data, function(group) {
var areChildrenAllSelected = true;
$.each(group.children, function(i, child) {
if (selectedIds.indexOf(child.id) < 0) {
areChildrenAllSelected = false;
return false; // Short-circuit $.each()
}
});
return !areChildrenAllSelected ? group : null;
});
options.callback({ results: selectableGroups });
}
}).on('select2-selecting', function(e) {
var $select = $(this);
if (e.val == '') {
e.preventDefault();
$select.select2('data', $select.select2('data').concat(e.choice.children));
$select.select2('close');
}
});
$('#showValue').click(function() {
$('#output').text($('#fruitSelect').val());
});
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){
$('#fruitSelect').select2("val", "");
for(var index in FRUIT_GROUPS){
$('#fruitSelect').select2('data', $('#fruitSelect').select2('data').concat(FRUIT_GROUPS[index].children));
}}else{
$('#fruitSelect').select2("val", "");
}
});
Demo
I have added the demo for the easiness of understanding. I haven't describe the code much since its easy to understand. if you have any questions feel free to ask.
Have Fun.
.jpg "N death Note")
