How to keep <option /> from redirecting instead of filtering like it's supposed to do

Question

I'm working on making a portfolio page and am using "Isotope.js" to do all the heavy lifting... however, I'm trying to put the filters in a drop-down for mobile compatibility and am running into a wall.

I've used the "data-filter" as the <option />'s value instead of an "href"; but every time you click on one, instead of filtering like it should, it tries redirecting you to a page with the "data-filter" as its name.

This is the php for the buttons

<nav id="filters">

            <ul>

                <li class="active"><a data-filter="*">All</a></li>

                <?php 
                    global $args;

                    $terms = get_terms( 'filter', $args );
                    $count = count( $terms );
                    $i = 0;
                    $term_list = '';

                    foreach ( $terms as $term ) {
                        $i++;
                        $term_list .= '<li><a data-filter=".'. $term->slug .'">'. $term->name .'</a></li>';
                    }

                    echo $term_list;                
                ?>

            </ul>

        </nav>

The brain, JS...

// filter buttons
    jQuery( '#filters a, #filter-drop option' ).click( function() {

        var filterCatagory = jQuery( this ).attr( 'data-filter' );
        $container.isotope( { filter: filterCatagory } );

            return false;
    });

    jQuery( "#filter-drop" ).change( function() {
        var filters = jQuery( this ).val();
        $container.isotope({ filter: filters });
    });

    jQuery( window ).smartresize( function() {
        $container.isotope({
            resizable : false,
            masonry : { 
                columnWidth : $container.width() / 3 
            }
        });
    }).smartresize();

    $container.imagesLoaded( function() {
        jQuery( window ).smartresize();
    });

    // filter Navigation

        jQuery( '<select id="filter-drop" />' ).appendTo( "#filters" );

        jQuery( "<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Filter"
        }).appendTo( "#filters select" );

        jQuery( "#filters a" ).each( function() {
            var el = jQuery( this );
            jQuery( "<option />", {
                "value" : el.attr( "data-filter" ),
                "text"  : el.text()
            }).appendTo( "#filters select" );
        });

        jQuery( "#filters select" ).change( function() {
            window.location = jQuery( this ).find( "option:selected" ).val();
        });

I'm somewhat new to jQuery so I might be (and most likely am) overlooking something, ANY help on the subject would be greatly appreciated!

Here's a link to the page in topic: http://wordpress-dev.designer17.com/portfolio/

Answer 1

In your code you create select element with options having values equal to data-filter attribute of your anchor elements

jQuery( "#filters a" ).each( function() {
        var el = jQuery( this );
        jQuery( "<option />", {
            "value" : el.attr( "data-filter" ),
            "text"  : el.text()
        }).appendTo( "#filters select" );
    });

then you bind onchange event handler to your select element, so that it redirects you to the page with address equal to the option value (i.e. your anchor's data-filter value)

jQuery( "#filters select" ).change( function() {
        window.location = jQuery( this ).find( "option:selected" ).val();
    });

so, it works as it is supposed to - redirecs you to a page with the "data-filter"

I think in your case you don't need that .change handler at all to let isotope do its job