Multiple dependencies for a dropdown in the editor

schwaluck

Hey,

I want to display certain fields in the editor only if the corresponding value has been selected in a drop-down menu.
I have already found this post here: https://editor.datatables.net/examples/api/dependentFields.html

This has already helped me and I was able to transfer it to my situation. However, only one condition is shown here. Since the drop-down from the example only distinguishes between "Simple" and "All". But in my case there are the following needed options:
1. in the dropdown "further_refuelling" is "No" selected, then the fields "Liter_adblue" and "Liter_oil" should not be displayed
2. in the dropdown "further_fuelling" is "adblue" selected, then only the field "Liter_adblue" should be displayed
3. in the dropdown "further_refuelling" is "oil" selected, then only the field "Liter_oil" should be displayed
4. in the dropdown "other_fuelling" is "Adblue and oil" selected, then the fields "Liter_adblue" and "Liter_oil" should be displayed

I have already tried to reproduce the whole thing using if/else (see following code). But this ends in an endless loop and does not work. The commented out code works, but only represents one of the options above.

Does anyone know how to solve the problem?

Code:

    editor.dependent( 'weitere_betankung', function ( val ) {
            if (val === 'Nein') {
                { hide: ['Liter_adblue', 'Liter_oel'] };
            }
            else if (val ==='adblue') {
                { show: ['Liter_adblue'] };
            }
            else if (val ==='Oel') {
                { show: ['Liter_oel'] };
            }
            else if (val ==='AdBlue und Oel') {
                { show: ['Liter_adblue','Liter_oel'] };
            }
            /*return val === 'Nein' ?
                { hide: ['Liter_adblue', 'Liter_oel'] } :
                { show: ['Liter_adblue', 'Liter_oel'] };
*/
    } );

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

For dependent(), you should be returning those values, so something like:

    editor.dependent( 'weitere_betankung', function ( val ) {
            if (val === 'Nein') {
                return { hide: ['Liter_adblue', 'Liter_oel'] };
            }
            else if (val ==='adblue') {
                return { show: ['Liter_adblue'] };
            }
            else if (val ==='Oel') {
               return  { show: ['Liter_oel'] };
            }
            else if (val ==='AdBlue und Oel') {
               return  { show: ['Liter_adblue','Liter_oel'] };
            }
            /*return val === 'Nein' ?
                { hide: ['Liter_adblue', 'Liter_oel'] } :
                { show: ['Liter_adblue', 'Liter_oel'] };
*/
    } );

Could you give that a try, please.

Colin

schwaluck

Hi colin,

thanks for the obvious answer!

This fixed my issue.

Thanks a lot and have a nice weekend,
Daniel