How To Show/Hide WordPress Meta Boxes Fields According to Option Select

[thehung1724]

I have a select list with values hosts and html5 and 3 custom fields. On select with value hosts 2 fields (Youtube and Vimeo) should appear, and if value is html5 the remain (Embed) should appear.

array(
    'name'     => __( 'Video File Host', 'suarezthemelocal' ),
    'id'       => 'videohost',
    'desc' => __( 'Select host of your video file. <br> <strong>Note:</strong> If you couldn\'t find host of your video file in the dropdown list, you can paste the embed code of file in the "Video Embed Code" box.', 'rwmb' ),
    'type'     => 'select',
    // Array of 'value' => 'Label' pairs for select box
    'options'  => array(
        'host' => __( 'Video Hosts', 'suarezthemelocal' ),
        'html5' => __( 'HTML5 Video', 'suarezthemelocal' ),
    ),
    // Select multiple values, optional. Default is false.
    'multiple'    => false,
    'std'         => '',
    'placeholder' => __( 'Select an Item', 'suarezthemelocal' ),
),
array(
    'name' => __('Youtube Video ID','suarezthemelocal'),
    'id' => 'video_youtube_id',
    'type' => 'text',
    'std' => '',
    'desc' => __('Youtube video ID','suarezthemelocal')
),
array(
    'name' => __('Vimeo Video ID','suarezthemelocal'),
    'id' => 'video_vimeo_id',
    'type' => 'text',
    'std' => '',
    'desc' => __('Vimeo video ID','suarezthemelocal')
),
array(
    'name' => __('Video Embed Code','suarezthemelocal'),
    'id' => 'video_embed_code',
    'type' => 'textarea',
    'std' => '',
    'desc' => __('Video Embed code. You can grab embed codes from hosted video sites.','suarezthemelocal')
)

Thanks for any help.

[norman_swan]

That’s called Conditional Logic, I recommend you to use Meta Box Conditional Logic, after install that plugin to your site, you can update your array like this:

array(
    'name'     => __( 'Video File Host', 'suarezthemelocal' ),
    'id'       => 'videohost',
    'desc' => __( 'Select host of your video file. <br> <strong>Note:</strong> If you couldn\'t find host of your video file in the dropdown list, you can paste the embed code of file in the "Video Embed Code" box.', 'rwmb' ),
    'type'     => 'select',
    // Array of 'value' => 'Label' pairs for select box
    'options'  => array(
        'host' => __( 'Video Hosts', 'suarezthemelocal' ),
        'html5' => __( 'HTML5 Video', 'suarezthemelocal' ),
    ),
    // Select multiple values, optional. Default is false.
    'multiple'    => false,
    'std'         => '',
    'placeholder' => __( 'Select an Item', 'suarezthemelocal' ),
),
array(
    'name' => __('Youtube Video ID','suarezthemelocal'),
    'id' => 'video_youtube_id',
    'type' => 'text',
    'std' => '',
    'desc' => __('Youtube video ID','suarezthemelocal'),
    // Visible when videohost = host
    'visible' => array('videohost', 'host')
),
array(
    'name' => __('Vimeo Video ID','suarezthemelocal'),
    'id' => 'video_vimeo_id',
    'type' => 'text',
    'std' => '',
    'desc' => __('Vimeo video ID','suarezthemelocal'),
    // Visible when videohost = host
    'visible' => array('videohost', 'host')
),
array(
    'name' => __('Video Embed Code','suarezthemelocal'),
    'id' => 'video_embed_code',
    'type' => 'textarea',
    'std' => '',
    'desc' => __('Video Embed code. You can grab embed codes from hosted video sites.','suarezthemelocal'),
    // Visible when videohost = html
    'visible' => array('videohost', 'html5')
)

Regards,

Norman