I have 3 hierarchical (category-like) custom taxonomies in a WP site, books, characters and writers. I want to create a dynamically populated dropdown menu of terms for each of these in the site’s sidebar, so that on selecting a term in any of the dropdown the site automatically loads the corresponding archive.

Using the method described here I can get this working on one taxonomy only. As soon as I add more I find that only the last one works.

Here’s what I have so far. Clearly I need to find a way for later instances of the function to not over-ride the earlier ones. I thought that changing the IDs and function names would do this but it’s clearly not that simple.

<?php
    $writers = get_categories('taxonomy=writers');
    $select = "<select name='writers' id='writers' class='postform'>n";
    $select.= "<option value='-1'>Writers</option>n";
    foreach($writers as $writer){
        if($writer->count > 0){
            $select.= "<option value='".$writer->slug."'>".$writer->name."</option>";
        }
    }
    $select.= "</select>";
    echo $select;
?>
<?php
    $characters = get_categories('taxonomy=characters');
    $select = "<select name='characters' id='characters' class='postform'>n";
    $select.= "<option value='-1'>Characters</option>n";
    foreach($characters as $character){
        if($character->count > 0){
            $select.= "<option value='".$character->slug."'>".$character->name."</option>";
        }
    }
    $select.= "</select>";
    echo $select;
?>
<?php
    $books = get_categories('taxonomy=books');
    $select = "<select name='books' id='books' class='postform'>n";
    $select.= "<option value='-1'>Books</option>n";
    foreach($books as $book){
        if($book->count > 0){
            $select.= "<option value='".$book->slug."'>".$book->name."</option>";
        }
    }
    $select.= "</select>";
    echo $select;
?>

JS:

<script>
    var dropdown = document.getElementById("writers");
    function onWriterChange() {
        if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
        location.href = "<?php echo home_url();?>/writer/"+dropdown.options[dropdown.selectedIndex].value+"/";
        }
    }
    dropdown.onchange = onWriterChange;

    var dropdown = document.getElementById("characters");
    function onCharacterChange() {
        if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
        location.href = "<?php echo home_url();?>/character/"+dropdown.options[dropdown.selectedIndex].value+"/";
        }
    }
    dropdown.onchange = onCharacterChange;

    var dropdown = document.getElementById("books");
    function onBookChange() {
        if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
        location.href = "<?php echo home_url();?>/book/"+dropdown.options[dropdown.selectedIndex].value+"/";
        }
    }
    dropdown.onchange = onBookChange;
</script>

Many thanks for any help.

$299 Affordable Web Design WordPress