Adding condition/rule based on previous selection

BalaKrishnanDhanuskodi

Hi All,

I have two field value 'Morning and Evening' in 'day_type' - If I choose Morning the following field 'time' options should display only first three options and if choose Evening it should only display from fourth option.

Code for your reference.

{
                "label": "Day Type:",
                "labelInfo": "<i>Select the Day type Morning or Evening</i>",
                "name": "day_type",
                "type": "select",
                "options": [
                    "",
                    "Morning",
                    "Evening"
                ]

            }
           ,{
                "label": "timings:",
                "labelInfo": "<i>Select the Timings</i>",
                "name": "time",
                "type": "select",
                "options": [
                    "",
                    "9:30 a.m. to 12:30 p.m.",
                    "10:00 a.m. to 1:00 p.m.",
                    "10:30 a.m. to 1:30 p.m.",
                    "5:00 p.m. to 8:00 p.m.",
                    "5:30 p.m. to 8:30 p.m.",
                    "6:00 p.m. to 9:00 p.m."
                ]
 } 

BalaKrishnanDhanuskodi

Please find the solution.

$( editor.field( 'day_type' ).input() ).on( 'change', function (e, d) 

        {

                var dayType = editor.field( 'day_type' );

                if (dayType.get() === 'Morning' ) {


                editor.field('time').update( [
                "",
                "9:30 a.m. to 12:30 p.m.",
                "10:00 a.m. to 1:00 p.m.",
                "10:30 a.m. to 1:30 p.m."
                ] );

                return false;
                }

                if ( dayType.get() === 'Evening' ) {


                editor.field('time').update( [
                "",
                "5:00 p.m. to 8:00 p.m.",
                "5:30 p.m. to 8:30 p.m.",
                "6:00 p.m. to 9:00 p.m."
                ] );

                return false;

                }

              return true;         
        } );