Как создать выбор динамической цепочки со строками с помощью Select2 ⇐ Jquery

[Anonymous]

Я создаю калькулятор в стиле DnD. Существуют деревья классов глубиной 3 класса. Как я смогу заставить Select 2 отображать только уровень 1, уровень 2 и уровень 3 в соответствующих выборках, а также основывать его на предыдущем выборе? Я уже видел эту работу с числами, но не могу заставить ее работать с определенными строками. Я создал JSFiddle здесь: https://jsfiddle.net/3gma61wf/45/
Способ настройки массива классов:

Код: Выделить всё

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' }
]
}
]
},
];

В моем локальном проекте я могу заполнить класс 1. Я хочу иметь возможность использовать класс 1 для поиска «дочернего» ключа и отображения там всех «текстовых» значений. . И так до третьего уровня. Я также попытался разделить массив на 3 части, каждая для отдельного поля выбора, а затем иметь «родительский» ключ, который соответствовал бы предыдущей формулировке в массиве, но по очевидным причинам, которые было бы сложнее поддерживать. По сути, есть ли способ заставить Select2 динамически понимать способ построения массива и автоматически обновлять его?
Я закомментировал весь код в JSFiddle, который я пытался использовать. . Мне удалось получить Class2 с помощью функции find(), но она возвращает только первое найденное значение, и когда я пытался переключить его на использование filter(), оно всегда возвращалось как неопределенное.

Код: Выделить всё

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' }
]
}
]
},
];

//Set up the Class Tree
$("#classtree1").append(classes1);
$('#classtree1').select2({
multiple: false,
placeholder: "Select class...",
data: classes1,
allowClear: true
});

// Change the values on first select
$("#classtree1").on("change", function () {
//$("#classtree2 option[value]").remove();
var selectedClassOne = $(this).val();
$('#test1').text(selectedClassOne); //TESTING
console.log(selectedClassOne);

//var foundClassTwo = classes1.filter(item => item.parent === selectedClassOne).text;
//$('#test2').text(foundClassTwo); //TESTING

//$("#classtree2").append(newOptions).val("").trigger("change");
//console.log(foundClassTwo);

//console.log(classes1.find(item => item.id === selectedClassOne));
});

Код: Выделить всё

#classes select {
width:30%;
}

Код: Выделить всё

Classes





Class1


Class2


Class3

Подробнее здесь: https://stackoverflow.com/questions/788 ... ng-select2