Multilevel dropdown

Hi there,

I'm creating a dropdown which changes its select options on change:

For example:
In the initial state there is only one option:

But on selection of this item, other related options are selected:

So, what i am wondering is: is there a way to add indentation to the new added items?
I am using standard setDataSource option:

dataSource.push({value: "51841970", text: "KU Leuven"});
fd.field('Organigram').widget.setOptions({dataTextField : 'text', dataValueField: 'value'})

Any help would be greatly appreciated.

Thank you!

Hello @asmita_adh,

Why don't you create cascading drop-downs?

A user can select an option from the drop-down and see additional options related to the selected category in another drop-down. That would be more user-friendly and easier to implement.

You can find the instruction on how to create cascading drop-downs here.

Hi @mnikitina ,

Well that was my initial try but since I'm making a rest call to populate the dropdown everytime, I cant seem to change it...

fd.field('Organigram').$on('change', function(data) {
        data ? $('#eenheidNaam').append(data + ' > ') : '';

function organigramPicker(){
    var Id =  fd.field('Organigram').value;
    var query = {"query":{"match":{"_id": Id }}};
            url: "......../_search/",
            dataType: "json",
            contentType: "application/json; charset=utf-8; odata=verbose;" ,
            data: JSON.stringify(query),
            success: function(data){
                $(data.hits.hits[0]._source.globalChildren).each(function(index, child){
                    dataSource.push({value:, text: getGlobalNames(});
        }).done(() => {

How do I make it work?
Thanks for your help already :slight_smile: