How to select a parent category and show the children to choose in another select?

How to select a parent category and show the children to choose in another select?

this is the code (parent taxonomy)

select
option value=""?php esc_html_e('Selecciona País', 'eltd-tours'); ?/option
        ?php 
            //Listado de taxonomias por país
            $tax_terms = get_terms(array(
            'taxonomy' = 'tipo_pais',
            'hide_empty' = false,
            'hierarchical' = true,
            'orderby'    = 'parent',
            'fields' = 'all',
            'parent' = '0',                    ) );
            foreach ($tax_terms as $tax_term) {?
            option value=""?php echo $tax_term-name;?/option
        ?php }?

/select

i need taxonomy child code, help please!

Topic categories Wordpress

Category Web


If I understoon you correctly, you want to have two selects, 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().

About

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