Using the taxonomy slug with WP Dropdown Categories and Javascript submit

This has been driving me mad for quite some time now, I’m using the example found in the WordPress codex for submitting wp_dropdown_categories using Javascript (https://codex.wordpress.org/Function_Reference/wp_dropdown_categories)

However, if I change ‘value_field’ to anything other than the ID it doesn’t fire when I change the select option, annoyingly it doesn’t throw any errors in the console either.

This is my code so far

<?php $args = array(
    'show_option_all'    => 'Filter by name',
    'value_field'        => 'slug',
    'id'                 => 'selectName',
    'taxonomy'           => 'name'
);

wp_dropdown_categories( $args ); ?>
<script type="text/javascript">
    <!--
    var dropdown = document.getElementById("selectName");
    function onCatChange() {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
            location.href = "<?php echo esc_url( home_url( '/' ) ); ?>redirect/here/"+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
    -->
</script>

Could anyone explain to me why it seems to break if you use anything other than the ID for value_field? If I remove the ‘value_field’ line or change it to ID it works perfectly but I really need it to show the slug!

Thanks in advance

Read more here: Using the taxonomy slug with WP Dropdown Categories and Javascript submit

Leave a Reply

Your email address will not be published. Required fields are marked *