how to show new field if option selected?

I have this code for create setting page for my plugin. with this code , i show two field in plugin setting for change style and set shadow on/off. In style section i have 4 option and i want show new section with options below style section if the second option is selected. commented in ode to better understand :

?php

class my_Settings_Page {
    
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'my_create_settings' ) );
        add_action( 'admin_init', array( $this, 'my_setup_sections' ) );
        add_action( 'admin_init', array( $this, 'my_option_fields' ) );
    }

    public function my_create_settings() {
        $page_title = __('Page Settings', 'my');
        $menu_title = __('my Settings', 'my');
        $capability = 'manage_options';
        $slug = 'my-settings';
        $callback = array($this, 'my_settings_content');
        $position = 2;
        add_menu_page($page_title, $menu_title, $capability, $slug, $callback, $position);
    }
    
    public function my_settings_content() { ?
        div class=wrap
            h1 class=my-set?php esc_html_e( 'My Settings', 'my' ); ?/h1
            ?php settings_errors(); ?
            form method=POST action=options.php
                ?php
                    settings_fields( 'my-settings' );
                    do_settings_sections( 'my-settings' );
                    submit_button();
                ?
            /form
        /div ?php
    }

    public function my_setup_sections() {
        add_settings_section( 'my_section', __('Description.', 'my' ), array(), 'my-settings' );
    }

    public function my_option_fields() {
        $fields = array(
                    // Style section
                    array(
                        'section' = 'my_section',
                        'label' = __('Style', 'my'),
                        'id' = 'stylemy',
                        'desc' = __('Choose style of login page', 'my'),
                        'type' = 'select',
                        'options' = array(
                            __('Default', 'my'),
                            __('First', 'my'),
                            __('Second', 'my'),
                            __('Third', 'my'),
                           __('other', 'my'),
                        )
                    ),
                    // if option selected ( First ) , show New section  below Style section. i want do this live without refresh page.
                    // New section 
                    array(
                        'section' = 'my_section',
                        'label' =  __('Box 1', 'my'),
                        'id' = 'my-b1',
                        'desc' =  __('This option Description.', 'my'),
                        'type' = 'checkbox',
                    )
        );

        foreach( $fields as $field ){
            add_settings_field( $field['id'], $field['label'], array( $this, 'my_field_callback' ), 'my-settings', $field['section'], $field );
            register_setting( 'my-settings', $field['id'] );
        }
    }
    public function my_field_callback( $field ) {
        $value = get_option( $field['id'] );
        $placeholder = '';
        if ( isset($field['placeholder']) ) {
            $placeholder = $field['placeholder'];
        }
        switch ( $field['type'] ) {
            
            
                        case 'select':
                            case 'multiselect':
                                if( ! empty ( $field['options'] )  is_array( $field['options'] ) ) {
                                    $attr = '';
                                    $options = '';
                                    foreach( $field['options'] as $key = $label ) {
                                        $options.= sprintf('option value=%s %s%s/option',
                                            $key,
                                            selected($value, $key, false),
                                            $label
                                        );
                                    }
                                    if( $field['type'] === 'multiselect' ){
                                        $attr = ' multiple=multiple ';
                                    }
                                    printf( 'select name=%1$s id=%1$s %2$s%3$s/select',
                                        $field['id'],
                                        $attr,
                                        $options
                                    );
                                }
                                break;

                        case 'checkbox':
                            printf('input %s id=%s name=%s type=checkbox value=1',
                                $value === '1' ? 'checked' : '',
                                $field['id'],
                                $field['id']
                        );
                            break;

            default:
                printf( 'input name=%1$s id=%1$s type=%2$s placeholder=%3$s value=%4$s /',
                    $field['id'],
                    $field['type'],
                    $placeholder,
                    $value
                );
        }
        if( isset($field['desc']) ) {
            if( $desc = $field['desc'] ) {
                printf( 'p class=description%s /p', $desc );
            }
        }
    }
}
new my_Settings_Page();

above question like: https://jsfiddle.net/masoudnkh/fdnybuo5/

Topic plugin-options options plugins Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.