If I understoon you correctly, you want to have two select
s, one for parent terms and the other for child terms, which will be dynamically populated based on the parent selection. Right?
First you need the html markup for the select
elements.
<select name="parent_term">
<option value=""><?php esc_html_e('Selecciona País', 'eltd-tours'); ?></option>
<?php echo implode( '', my_select_options( my_parent_tax_terms('tipo_pais') ) ); ?>
</select>
<select name="child_term"></select>
Here’s the helper functions I’ve used to make the html a little cleaner looking.
function my_parent_tax_terms( string $taxonomy ) {
$terms = get_terms(array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
'hierarchical' => true,
'orderby' => 'parent',
'fields' => 'all',
'parent' => '0',
) );
return ( $terms && is_array($terms) ) ? $terms: array();
}
function my_select_options( array $terms ) {
$out = array();
foreach ($terms => $term) {
$out[] = sprintf(
'<option value="%d">%s</option>',
$term->term_id,
$term->name
);
}
return $out;
}
Then add an event listener to the parent term select
have it populate the child term select
when the parent selection changes. You can do this with jQuery or plain javascript.
jQuery(document).on('ready', function(){
// populate child term select, when parent selection changes
jQuery('select[name="parent_term"]').on('change', function(){
// get child terms select element
var $child_select = jQuery('select[name="child_term"]');
// clear any previous options
jQuery($child_select).empty();
// get new options
var $child_options = get_child_terms_from_admin_ajax_or_WP_REST_or_localized_script();
// loop options to append them to the child select
for (i = 0; i < $child_options.length; i++) {
jQuery($child_select).append(`<option value="${$child_options[i].value}">${$child_options[i].name}</option>`);
}
});
});
Note that the child terms need to come from somewhere. This could be either the legacy admin-ajax, the more modern WP REST API, or you could even create a big config array with parent terms and their child terms and then make it available for jQuery/js with wp_localize_script().