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;