Demonstrates how a drop-down list can be updated dynamically in repeatable sections using Admin Page Framework.

admin-page-framework-demo-dynami-dropdown-in-repeatable-sections.php

<?php
/** 
 *  Plugin Name:    Admin Page Framework Demo - Dynamic Drop-down in Repeatable Sections
 *  Plugin URI:     http://en.michaeluno.jp/admin-page-framework
 *  Description:    Demonstrates how a drop-down list can be updated dynamically in repeatable sections.
 *  Author:         Michael Uno
 *  Author URI:     http://michaeluno.jp
 *  Version:        1.0.0
 */
 
include( dirname( dirname( __FILE__ ) ) . '/admin-page-framework/library/apf/admin-page-framework.php' );
if ( ! class_exists( 'AdminPageFramework' ) ) {
    return;
}
    
    
class APFDemo_DynamicDropDownInRepeatableSections extends AdminPageFramework {
    
    public function setUp() {
                   
        $this->setRootMenuPage( 'Settings' );   
                           
        $this->addSubMenuItems(   
            array(
                'title'         => __( 'Dynamic Drop-down', 'admin-page-framework-demo' ),        // page title
                'page_slug'     => 'dynamic_dropdown',    // page slug
            )        
        );  
        
        $this->addInPageTabs(
            'dynamic_dropdown',  // target page slug
            array(
                'tab_slug'  => 'dynamic',
                'title'     => __( 'Dynamic', 'admin-page-framework-demo' ),
                'script'    => array(
                    'src' => dirname( __FILE__ ) . '/field-updater.js',
                    'in_footer' => true,
                ),
                    
            )                    
        );    
 
        $this->setPageHeadingTabsVisibility( false );
        $this->setInPageTabTag( 'h2' );
        
    }
    
    public function load() {
        
        $this->addSettingSections(
            array(
                'section_id'    => 'dynamic',
                'title'         => __( 'Dynamic', 'admin-page-framework-demo' ),
                'repeatable'    => true,
            )
        );
        $this->addSettingFields(
            'dynamic',  // target section ID
            array(
                'field_id'  => 'main_group',
                'title'     => __( 'Main Group', 'admin-page-framework-demo' ),
                'type'      => 'select',
                'label'     => array(
                    'a'         => __( 'Group A', 'admin-page-framework-demo' ),
                    'b'         => __( 'Group B', 'admin-page-framework-demo' ),
                    'c'         => __( 'Group C', 'admin-page-framework-demo' ),
                ),
                'default'   => 'a',
            ),
            array(
                'field_id'  => 'sub_groups',
                'content'   => array(
                    array(
                        'field_id'  => 'sub_group_a',
                        'title'     => __( 'Sub Group A', 'admin-page-framework-demo' ),
                        'type'      => 'select',
                        'label'     => array(
                            'one'       => __( 'One', 'admin-page-framework-demo' ),
                            'two'       => __( 'Two', 'admin-page-framework-demo' ),
                            'three'     => __( 'Three', 'admin-page-framework-demo' ),
                        ),
                    ),
                    array(
                        'field_id'  => 'sub_group_b',
                        'title'     => __( 'Sub Group B', 'admin-page-framework-demo' ),
                        'type'      => 'select',
                        'label'     => array(
                            'four'       => __( 'Four', 'admin-page-framework-demo' ),
                            'five'       => __( 'Five', 'admin-page-framework-demo' ),
                            'six'        => __( 'Six', 'admin-page-framework-demo' ),
                        ),
                    ),
                    array(
                        'field_id'  => 'sub_group_c',
                        'title'     => __( 'Sub Group C', 'admin-page-framework-demo' ),
                        'type'      => 'select',
                        'label'     => array(
                            'seven'       => __( 'Seven', 'admin-page-framework-demo' ),
                            'eight'       => __( 'Eight', 'admin-page-framework-demo' ),
                        ),
                    ),                
                
                ),
            )
        );
        
    }
    
    public function content( $sHTML ) {
        return $sHTML . get_submit_button();
    }
    
        
}

new APFDemo_DynamicDropDownInRepeatableSections;

field-updater.js

(function($){

    $( document ).ready( function() {
        
        var _sTriggerFieldID = 'main_group';

        // Initial values.
        $( 'select[name*="[' + _sTriggerFieldID + ']"]' ).each( function( iIndex ){
            _showSubGroup( this );
        } );
        
        // For when the user selects the main group.
        $( 'select[name*="[' + _sTriggerFieldID + ']"]' ).on( 'change', function( event ){            
            _showSubGroup( this );
        } );
        
        // For when a repeatable add button is clicked.
        $( 'body' ).on( 'admin-page-framework_repeated_field', function( event ){
            $( 'select[name*="[' + _sTriggerFieldID + ']"]' ).on( 'change', function(){            
                _showSubGroup( this );
            } );
            
        } );
            
    } );
    
        function _showSubGroup( nodeThis ) {
            
            var _sMainGroupName = $( nodeThis ).val();
            var _oSectionTable  =  $( nodeThis ).closest( 'table' );
            var _sTargetField   = 'sub_group_' + _sMainGroupName;
            
            _oSectionTable.find( 'fieldset[id$="sub_groups"]' ).show();
            _oSectionTable.find( 'fieldset[id$="' + _sTargetField + '"]' ).show()
                .siblings( '.admin-page-framework-fieldset' ).hide();
            
        }
    
}(jQuery));