How to populate a dropdown menu with option selected?

Question

I have this code to populate a custom dropdown menu of my WP categories. Now this is all working fine, but i'd like the current category to be selected in the dropdown. How can i do this?

<select name="page-dropdown"
 onchange='document.location.href=this.options[this.selectedIndex].value;'>
<?php

    hierarchical_category_tree( 0 ); // the function call; 0 for all categories; or cat ID  

function hierarchical_category_tree( $cat ) {
    // wpse-41548 // alchymyth // a hierarchical list of all categories //

  $next = get_categories('hide_empty=false&orderby=name&order=ASC&parent=' . $cat);
  if( $next ) :    
    foreach( $next as $cat ) :
    echo '<option value="' . get_category_link( $cat->term_id ) . '">' . $cat->name . '</option>';

    hierarchical_category_tree( $cat->term_id );
    endforeach;    
 endif;

   echo "\n";
}  
?> </select>

Any help is greatly appreciated! Thank you.

Answer 1

Use the selected HTML attribute. See w3schools docs.

In your foreach loop, check if the current category matches the current iteration, and add the selected attribute to that option element. You are already getting the ID of each term, so you'll need to also get the current category ID so you can check against it. Perhaps I would use get_the_category, to get the current category.

EDIT: Here is your updated function. New lines are commented:

function hierarchical_category_tree( $cat ) {
    // grab the current category object
    $current = get_the_category();
    $next = get_categories('hide_empty=false&orderby=name&order=ASC&parent=' . $cat);
    if( $next ) {  
        foreach( $next as $cat ) {
            echo '<option value="' . get_category_link( $cat->term_id ) . '"';
                // if the current category object matches the current ID of the iteration
                // add the selected attribute to the option element
                if ($current[0]->term_id == $cat->term_id) {
                    echo 'selected';
                }
            echo '>' . $cat->name . '</option>';
            hierarchical_category_tree( $cat->term_id );
        }  
    }
    echo "\n";
}  

Answer 2

From the looks of this script, as soon as you click an option it redirects you to whatever the category archive is, since that's the case we can just get the current category that the user lands on and compare the current category ID to the category ID in the loop:

Here's the modified code:

<select name="page-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
  <?php
    hierarchical_category_tree( 0 ); // the function call; 0 for all categories; or cat ID  

    // Get current category
    $current_cat = get_queried_object();
    $curr_cat_id = ( is_category() ) ? $current_cat->term_id : -1;

    function hierarchical_category_tree( $cat ) {
        // wpse-41548 // alchymyth // a hierarchical list of all categories //
        $next = get_categories('hide_empty=false&orderby=name&order=ASC&parent=' . $cat);
        if( $next ) :    
            foreach( $next as $cat ) :
                echo '<option value="' . get_category_link( $cat->term_id ) . '" ' . ( $cat->term_id == $curr_cat_id ) ? 'selected="selected"' : '' . '>' . $cat->name . '</option>';
                hierarchical_category_tree( $cat->term_id );
            endforeach;    
        endif;

        echo "\n";
    }  
  ?>
</select>