Redux

# Select

The Select field displays information in a drop-down field in both single and multi-select formats.

Table of Contents

# Arguments

Name
 Type
Default
 Description
type string select Value identifying the field type.
options array Array of options in key pair format. The key represents the ID of the option. The value represents the text to appear in the selector.
width string 40% Value to set the width of the selector.
multi bool false Flag to set the multi-select variation of the field.
placeholder string Text to display in the selector when no value is present.
sortable bool false Flag to enable data sorting.
select2 array Array of arguments sent to the select2 javascript declaration. Select2 Documentation (opens new window).
ajax bool false Set to true to use ajax to fetch options when the data argument is used. Requires Redux 4.x
min-input-length integer 1 For use when the ajax flag is set to true. This controls how many characters must be typed before an ajax request is performed. Requires Redux 4.x

Also See

# Standard Select

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'opt-select',
    'type'     => 'select',
    'title'    => esc_html__('Select Option', 'your-textdomain-here'), 
    'subtitle' => esc_html__('No validation can be done on this field type', 'your-textdomain-here'),
    'desc'     => esc_html__('This is the description field, again good for additional info.', 'your-textdomain-here'),
    // Must provide key => value pairs for select options
    'options'  => array(
        '1' => 'Opt 1',
        '2' => 'Opt 2',
        '3' => 'Opt 3'
    ),
    'default'  => '2',
) );

# Multi Select

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'opt-multi-select',
    'type'     => 'select',
    'multi'    => true,
    'title'    => esc_html__( 'Multi Select Option', 'your-textdomain-here' ), 
    'subtitle' => esc_html__( 'No validation can be done on this field type', 'your-textdomain-here' ),
    'desc'     => esc_html__( 'This is the description field, again good for additional info.', 'your-textdomain-here' ),
    //Must provide key => value pairs for radio options
    'options'  => array(
        '1' => 'Opt 1',
        '2' => 'Opt 2',
        '3' => 'Opt 3'),
    'default'  => array( '2', '3' )
) );

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.
 
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'select'
) );

# Example Usage

This example in based on the example usage provided above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

global $redux_demo;

echo 'Single Select value: ' . $redux_demo['opt-select'];
echo 'Multi Select value: '  . $redux_demo['opt-multi-select'][0];
echo 'Multi Select value: '  . $redux_demo['opt-multi-select'][1];

# Disabling "Clear" Icon

Sometimes you don't want the user to have a null value. The "clear" icon is easily removed by passing a value to the select2 argument. Be sure to define a default value or the field will start in a null state.

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'opt-multi-select',
    'type'     => 'select',
    'title'    => esc_html__('Disable Select2 Clear Button', 'your-textdomain-here'), 
    'options'  => array(
        '1' => 'Opt 1',
        '2' => 'Opt 2',
        '3' => 'Opt 3'),
    'default'  => array( '2' ),
    'select2'  => array('select2' => array( 'allowClear' => False ) )
    ) );

← Slider →