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.

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.

• custom-taxonomy
• dropdown
• select

• Could you give an example for a url with all options selected, knowing the url structure you want could help. – Buttered_Toast Commented Sep 12, 2021 at 13:29
• sure – so if one were to select "asterix" from the "character" dropdown we would automatically be taken to [home_url]/character/asterix. the url structure is always /custom_taxonomy/term. – mtm Commented Sep 13, 2021 at 7:44

1 Answer 1

The "dropdown" element declared and used in each of these functions is the same, so the last one is overriding all previous.

Specifying different terms each time fixes the problem:

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

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

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