Transform UL->li inot List selected for isotope filtering menu

Question

I have a problem with my isotope filters menu. I would like to transform the simple links in a selected list box but I have problems with the JS or I don't really know if it's possible with the Ul->Li.

Here is the menu select

 jQuery(function ($) { var $container = $('#posts-list'); $container.isotope({ itemSelector : '.item', layoutMode : 'masonry' }); var $optionSets = $('#filters'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('#filters'); $optionSets.find('.selected').removeClass('selected'); $this.addClass('selected'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="filters"> <li><a href="#" data-filter="*" id="all">Everything</a></li> <?php $terms = get_terms("category"); $count = count($terms); if ( $count > 0 ){ foreach ( $terms as $term ) { echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\\n"; } } ?> </ul> /////////////////// DISPLAY ITEMS /////////////////// <div id="posts-list"> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); $termsArray = get_the_terms( $post->ID, "category" ); $termsString = ""; foreach ( $termsArray as $term ) { $termsString .= $term->slug.' '; } ?> <div class="<?php echo $termsString; ?> item bit-3"> // DISPLAY THE CONTENT </div> <?php endwhile; ?> </div> 

And I tried for the selected menu:

 jQuery(function ($) { var $container = $('#posts-list'); $container.isotope({ itemSelector : '.item', layoutMode : 'masonry' }); $("#filters").on("click", ".init", function() { $(this).closest("ul").children('li:not(.init)').toggle(); }); var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); }); }); 

 <ul id="filters"> <li class="init"><a href="#" data-filter="*" id="all">Everything</a></li> <?php $terms = get_terms("category"); $count = count($terms); if ( $count > 0 ){ foreach ( $terms as $term ) { echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\\n"; } } ?> </ul> 

Could you help me please?

Answer 1

Below code will do it :

PHP :

<select id="filters">
     <option data-filter="*" id="all">Everything</option>
    <?php 
        $terms = get_terms("category");
        $count = count($terms);
        if ( $count > 0 ){
            foreach ( $terms as $term ) { 
                echo "<option data-filter='.".$term->slug."'>" . $term->name . "
                         </option>\n";
            }
        } 
    ?>
</select>

<?php $the_query = new WP_Query( 'posts_per_page=50' );
    if ( $the_query->have_posts() ) : ?>
    <div id="posts-list">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
           $termsArray = get_the_terms( $post->ID, "category" ); ?> 
          <!-- Get the terms for this particular item -->
    <?php 
        $termsString = "";
        foreach ( $termsArray as $term ) {
            $termsString .= $term->slug.' ';
        } ?> 
    <div class="<?php echo $termsString; ?>item">
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1>
                <a href="<?php the_permalink() ?>">
                    <?php the_title(); ?>
                </a>
            </h1>
            <section class="post_content">
                <p><?php echo get_the_content(); ?></p>
            </section>
        </article>
    </div> <!-- end item -->
    <?php endwhile;  ?>
</div> <!-- end isotope-list -->
<?php endif; ?>

JS :

jQuery(function ($) {

    var $container = $('#posts-list'),
    filters = {};

    $container.isotope({
        itemSelector : '.item'
    });

    // filter buttons
    $('select').change(function(){
        var $this = $(this);

        var group = $this.attr('data-filter');

        filters[ group ] = $this.find(':selected').attr('data-filter');

        var isoFilters = [];
        for ( var prop in filters ) {
            isoFilters.push( filters[ prop ] )
        }

        var selector = isoFilters.join('');
        $container.isotope({ filter: selector });
        return false;
    });

});

NOTE: Tested