Как сделать в библиотеке Select2 зависимые выпадающие списки?

Question

[Ruslan Danilov]

Здравствуйте!
Как сделать зависимые выпадающие списки в библиотеке Select. Нужно что бы сперва отображался 1 список, а при выборе опции, появлялся с вариантами другой список.
Вот использую такой масив:

var data = [
        { id: 1, name: 'options1', options: [option1, option2, option3] }, 
        { id: 2, name: 'options2', options: [option1, option3, option6] }, 
        { id: 3, name: 'options3', options: [option5, option2, option51]}
    ];

Answer 1

[Islam Ibakaev]

примерно так

// для главного (статического) списка
const parent = [{id: 1, text: 'top1'}, {id: 2, text: 'top2'}, {id: 3, text: 'top3'}]
// для зависимого (динамического) списка
const child =  [{1: { id: 1, text: 'child1-1', id: 2, text: 'child1-2', id: 3, text: 'child1-3' }}]

const selected = parent[0]

$('#parentSelect')
  .select2({ data: parent })
  .val(selected)
  .trigger("change")
  .on("change", (e) => $('#childSelect').empty().select2({ data: child[e.target.value] }));

$('#childSelect').select2({ data: child[selected.id] })

p.s. массив child нужно дополнить

Comments

[Ruslan Danilov]

Спасибо

[Islam Ibakaev]

ruslan111192, рад был помочь

[Ruslan Danilov]

Очень помогли!!)