I am creating a DnD style calculator. There are class trees that are 3 classes deep. How would I be able to force Select 2 to only show level 1, level 2 and level 3 in their respective selects and also base it on the prior selection? I have seen this work with numbers before but I cannot get it to work with specific strings. I created a JSFiddle here: https://jsfiddle.net/3gma61wf/45/
The way the class array is set up:
const classes1 = [
{
id: '',
text: 'Select ICQ...',
},
{
id: 'fighter',
text: 'Fighter',
children: [
{
id: 'barbarian',
text: 'Barbarian',
children: [
{ id: 'beserker', text: 'Beserker' }
],
id: 'soldier',
text: 'Soldier',
children: [
{ id: 'knight', text: 'Knight' }
]
}
]
},
{
id: 'archer',
text: 'Archer',
children: [
{
id: 'ranger',
text: 'Ranger',
children: [
{ id: 'elite-ranger', text: 'Elite Ranger' }
],
id: 'paladin',
text: 'Paladin',
children: [
{ id: 'bard', text: 'Bard' }
]
}
]
},
{
id: 'mage',
text: 'Mage',
children: [
{
id: 'wizard',
text: 'Wizard',
children: [
{ id: 'warlock', text: 'Warlock' }
],
id: 'druid',
text: 'Druid',
children: [
{ id: 'artificer', text: 'Artificer' }
]
}
]
},
];
On my local project I can get Class 1 to fill in. I want to be able to use Class 1 to find the “children” key and display all of the “text” values there. So on until the third level. I have tried also splitting the array into 3 parts, each for a different select field and then having a “parent” key that would match the prior wording in the array but for obvious reasons that would be more difficult to maintain. Basically, is there a way I can force Select2 to dynamically understand the way I’ve built the array and automatically update it?
I have all commented out code in the JSFiddle that I have attempted. I was able to get Class2 using the find() function but that only ever returns the first found value and when I attempted to switch it to use filter() it would always come back as undefined.