Populate Select2 field with another Select2 field in elementor

Question

I have a field where I get available post types, and I'd like my second select2 to be populated with taxonomies from the first select2.

I have a function written for both, but trying to get the data from "post_type" is proving tricky.

The below is causing an ajax loading issue in the page builder.

I've searched high and low but haven't found a solution.

Thanks in advance.

Answer 1

the best i can do for you is interduce this GitHub plugin it uses js to do this

here is the link to the project: https://github.com/WPPlugins/void-elementor-post-grid-addon-for-elementor-page-builder

widget.php:

$this->add_control(
            'post_type',
            [
                'label' => esc_html__( 'Select post type', 'void' ),
                'type' => Controls_Manager::SELECT2,
                'options' => void_grid_post_type(),                                
            ]
        );
        $this->add_control(
            'taxonomy_type',
            [
                'label' => __( 'Select Taxonomy', 'void' ),
                'type' => Controls_Manager::SELECT2,
                'options' => '',                               
            ]
        );

ajax.js

jQuery( function( $ ) {
    elementor.hooks.addAction( 'panel/open_editor/widget', function( panel, model, view ) {

        //get post type 
        $('[data-setting="post_type"]').change(function(){        
            $('[data-setting="taxonomy_type"]').empty();
            var post_type = $('[data-setting="post_type"]').val() || [];
            var data = {
                action: 'void_grid_ajax_tax',
                postTypeNonce : void_grid_ajax.postTypeNonce,
                post_type: post_type
            };        
            $.post(void_grid_ajax.ajaxurl, data, function(response) {        
                var taxonomy_name = JSON.parse(response);                 
                $.each(taxonomy_name,function(){
                    if(this.name == 'post_format'){
                        return;
                    }
                    $('[data-setting="taxonomy_type"]').append('<option value="'+this.name+'">'+this.name+'</option>'); 
                });
                $('[data-setting="taxonomy_type"]')[0].selectedIndex = -1;
            });
            return true;
        });
        $('[data-setting="taxonomy_type"]').change(function(){        
            $('[data-setting="terms"]')[0].options.length = 0;       
            var taxonomy_type = $('[data-setting="taxonomy_type"]').val();
            var data = {
                action: 'void_grid_ajax_terms',
                postTypeNonce : void_grid_ajax.postTypeNonce,
                taxonomy_type: taxonomy_type
            };      
            $.post(void_grid_ajax.ajaxurl, data, function(response) {        
                var terms = JSON.parse(response);                        
                $.each(terms,function(){
                    $('[data-setting="terms"]').append('<option value="'+this.id+'">'+this.name+'</option>'); 
                });
                $('[data-setting="terms"]')[0].selectedIndex = -1;
            });   
            return true;
        });
    } );

});