How to change redux options of select field type based on other field value?

Question

My code is as below in redux

$fields = array(
    'id'       => 'opt-select',
    'type'     => 'select',
    'title'    => __('Select Option', 'redux-framework-demo'), 
    'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
    'desc'     => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
    // Must provide key => value pairs for select options
    'options'  => array(
        '1' => 'Opt 1',
        '2' => 'Opt 2',
        '3' => 'Opt 3'
    ),
    'default'  => '2',
);

Now, I would like to 3rd option will be shown if header variation 2 is set. Header variation is another field which have two option such as Header variation 1 and Header variation 2. How to write code to achieve this functionality?

Adriano Monecchi · Answer 1 · 2017-02-14T04:54:59.080

You can use Redux Framework's required argument for any given field.

From the Docs:

Fields may be linked/required/folded according to a/multiple parent value(s). This is accomplished by appending a required argument, similar to the following, on any given field:

'required' => array('opt-header-variations','equals','2')

The first value of the array is the field ID in which to link the field to.
The second value is the operation to perform.
The third value is the value to compare against.

The required argument supports a few operators so you can do some logic.

A real example:

Bellow we're setting two fields, both are select field types, but it would work the same for any field type. We want to hide the select field with "opt-select" id and only show it if the select field "opt-header-variations" value equals 2, in this case the same as the "Header variation 2" option.

In order to do that, we need to use the required argument on the select field we want to conditionally hide as such:

'required' => array('opt-header-variations','equals','2'),

$fields = array(
    array (
        'id' => 'opt-header-variations',
        'type' => 'select',
        'title' => __('Header Styles', 'redux-framework-demo'),
        'subtitle' => __('Header Variations', 'redux-framework-demo'),
        'options'  => array(
            '1' => 'Header variation 1',
            '2' => 'Header variation 2'
            ),
        'default' => 1,
    ),
    array (
        'id'       => 'opt-select',
        'type'     => 'select',
        'title'    => __('Select Option', 'redux-framework-demo'), 
        'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
        'desc'     => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
         // Must provide key => value pairs for select options
        'options'  => array(
            '1' => 'Opt 1',
            '2' => 'Opt 2',
            '3' => 'Opt 3'
            ),
        'default'  => '2',
        'required' => array('opt-header-variations','equals','2')
    ),
);

The required argument can also be used with multiple “parent” required values. If all of these conditions are not met, this field will not be visible and the output CSS will not be used. An example is as follows:

'required' => array( 
    array('layout','equals','1'), 
    array('parent','!=','Testing') 
)

How to change redux options of select field type based on other field value?

1 Answers1