Default URL for category dropdown select option

Question

I have a dropdown menu for my categories:

<form action="<?php bloginfo('url'); ?>" method="get" id="catform">
    <?php
        $parent = get_cat_ID("Pictures");
        $select = wp_dropdown_categories("child_of=".$parent."&hide_empty=0&orderby=name&echo=0&show_option_none=Select...");
        $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
        echo $select;
    ?>
</form>

This automatically goes to the category page in question when an option is chosen.

This is working great, except for one minor detail...the default option.

I have a default option called Select..., but what I didn't realize is when you choose that option something is returned. On normal pages, nothing seems to happen, but that's because Select... is chosen by default. On the category page (category.php), if you choose Select... you get redirected to: http://myurl.com/?cat=-1.

Is there any way when someone chooses Select... the page does not submit the form?

Thank you,
Josh

Answer 1

I found a solution!

As I was looking for a fix I ran across this article: https://andrux.net/add-empty-option-to-wp_dropdown_categories/

This is very close to what I was looking for, so I tweaked it.

The only thing I did to the form was remove the show_option_none=Select...

The form code:

<form action="<?php bloginfo('url'); ?>" method="get" id="catform">
    <?php
        $parent = get_cat_ID("Pictures");
        $select = wp_dropdown_categories("child_of=".$parent."&hide_empty=0&orderby=name&echo=0");
        $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
        echo $select;
    ?>
</form>

Now, this goes into functions.php:

function add_extra_blank_option( $html ) {
    $needle = '<option';
    $replace_with = '<option value="" selected="selected" disabled>Select...</option><option';

    /* replace the very first '<option' text with the blank option tag */
    $pos = strpos( $html, $needle );
    if ( $pos !== false ) {
        $html = substr_replace( $html, $replace_with, $pos, strlen( $needle ) );
    }

    return $html;
}
add_filter( 'wp_dropdown_cats', 'add_extra_blank_option' );

This adds an extra blank option, but I wanted my new option to say "Select...", so "Select..." has been added in-between the option tags.

I also wanted my new option to be showing by default, so I added selected="selected" to my option tag.

Finally, I wanted the option to be disabled, so that the option could not be selected, so I added disabled to my option tag.

That's it, that's all there is to it :-)

Thanks,
Josh