categories - 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!

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!

• categories

Share Improve this question edited Feb 3, 2020 at 6:30 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Feb 3, 2020 at 5:16 Seba LagosSeba Lagos 122 bronze badges 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 – Dharmishtha Patel Commented Feb 3, 2020 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 Commented Feb 4, 2020 at 3:58

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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().