set options for a select field depending on another field

Quasel

e.g. we have a field bwrb - and for some of the bwrb values (not all) we have a second field called team and i only want to show this additional field if it is necessary - i have found some examples but nothing wich covers edit and create properly

The hardest part was to realize if i don't pre-populate the team select field with all options before init i get a null value for team if there was one ... !!!!! -> is there a pre init event? - solution was to pre-load on close alle possible options and to update them if a bwrb is chosen/changed.

Maybe this helps somenone ;) is there an easier way? anything i could have used but didn't know of it?

// Initialise the form to the correct values on edit - to just show team options wich are related to the bwrb field (if any)
        editor.on('initEdit', function () {
            team_rel_id=editor.field('team_rel.id').get(); 
            console.log('init: ' + team_rel_id);
            if ( team_rel_id > 0) {
                editor.field('team_rel.id')
                    .update(getOptionsTeam_rel(editor.get('bwrb_rel.id')))
                    .show()
                    .set(team_rel_id);   //necessary id is lost in the update process
            }

        });

        // Listen for change events from the 'bwrb_rel.id' select and update 'team_rel.id'
        $('select', editor.node('bwrb_rel.id')).on('change', function (e) {
            console.log('select:');
            console.log(e);
            showFieldTeam = false;
            table_bwrb.api().data().each( function ( value, index ) {
                if (value.id == editor.field('bwrb_rel.id').get() && value.teamtn_max > 1) {
                    console.log('Data in index: ' + index + ' is: ' + value.id);
                    editor.field('team_rel.id').update(
                        getOptionsTeam_rel(editor.get('bwrb_rel.id')));
                    showFieldTeam = true;
                    return false;
                }
            });
            if (true == showFieldTeam) {
                editor.field('team_rel.id').show();
            } else {
                editor.field('team_rel.id').hide().set("");  //important to set the value to zero -> else it "could" be saved 
            }

        });

This took me some time to figure out - if you don't pre-populate the team field with all options - and you try to edit an entry
the team id (if any) gets set to null - because it can't find an corresponding option!!!

    //cleanup after closing
        editor.on('close', function() {
            id= -1; // get everything
            editor
                .field('team_rel.id').update(getOptionsTeam_rel(id))  //very important 
                .hide();
        });

allan

Hi,

Thanks for sharing this with us. Combinational fields can certainly be a little tricky - mainly because each implementation has its own nuances.

pre init event?

I don't quite understand what you are looking for there I'm afraid. Isn't the initEdit event that you are using covering that?

Allan