I am trying to design a select menu with dynamic accordion-style checkbox options similar to the images linked below:
https://i.sstatic.net/lUsyD.png
or like this:
https://i.sstatic.net/rJngZ.png
The data structure I am working with is as follows:
let allowedShifts = [{
category: "Days",
name: "D"
},
{
category: "Evenings",
name: "E"
},
{
category: "Nights",
name: "N"
},
{
category: "Days",
name: "d"
},
{
category: "Nights",
name: "n"
}];
I attempted to achieve the desired functionality using multiple select menus, but faced challenges filtering the data based on category. Here is a snippet of my code for reference:
HTML:
<select multiple class="form-control" name="shifts" id="exampleSelect2" [(ngModel)]="allowedShifts">
<optgroup label="Days">
<option [value]="shiftIcon.name" *ngRepeat="let shiftIcon in allowedShifts | filter: {category: 'Days'}">
{{shiftIcon.name}}
</option>
</optgroup>
<optgroup label="Evenings">
<option [value]="shiftIcon.name" *ngFor="let shiftIcon in allowedShifts | filter: {category: 'Evenings'}">
{{shiftIcon.name}}
</option>
</optgroup>
<optgroup label="Nights">
<option [value]="shiftIcon.name" *ngFor="let shiftIcon in allowedShifts | filter: {category: 'Nights'}">
{{shiftIcon.name}}
</option>
</optgroup>