0

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!

2
  • you mean you need to parent category wise subcategory display right? otherwise you need to the hierarchy of categories ? please give me answer I have help for you Feb 3 '20 at 5:51
  • exact. I need to select the parent category, in a second select for example: <select> <option> taxonomy child 1 </option> <option> taxonomy child 2 </option> <option> taxonomy child 3 </option> </select> the options can be obtained dynamically.
    – Seba Lagos
    Feb 4 '20 at 3:58
0

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().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.