Isotope Drop Down Categories Filter Function

Question

I have a code in my functions file that I am using to generate a list of categories so that I can use isotope to filter the current page. However I need to know how to -

How to make it a drop down and how to make the isotope script work with it?

How to populate the drop down with the terms/child terms of the current category being viewed?

This is the code that I am referring to -

    function isotope_categories() {

    $terms = get_terms('videoscategory');

    $html = '<ul id="options">';
    $html .= '<li><a href="#" data-option-value="*" data-filter="*" class="selected">All items</a></li>';

    foreach ($terms as $term) {


        $html .= "<li><a href='#' data-filter='.{$term->slug}' class='current'>{$term->name}</a></li>";   
    }

    $html .= '</ul>';

    echo $html;
}

Here is the script I need to make work with a drop down and isotope -

<script type="text/javascript">
   $(document).ready(function(){
   var mycontainer = $('#isocontent');
 mycontainer.isotope({
 itemSelector: '.box'
 });

   // filter items when filter link is clicked
   $('#options a').click(function(){
   var selector = jQuery(this).attr('data-filter');
   mycontainer.isotope({ filter: selector });
   return false;  
   });

   });
   </script>

EDIT: I was able to make the function into a drop down using this code -

 function isotope_categories() {

    $terms = get_terms('videoscategory');

    $html = '<select class="option-set clearfix"  data-filter-group="leuchtenart">';
    $html .= '<option value="*" data-filter-value="" class="selected">All items</option>';

    foreach ($terms as $term) {


        $html .= "<option value='#filter-leuchtenart-{$term->slug}' data-filter-value='.{$term->slug}'>{$term->name}</option>";   
    }

    $html .= '</select>';

    echo $html;
}

And I changed the js using the following code, however it's not working and I am receiving a error on the last line "SyntaxError: Illegal Character"

<script type="text/javascript">
$(function(){

  var $container = $('#isocontent'),
      filters = {};

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

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

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = this.attr('data-filter-group');
    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    var selector = isoFilters.join('');
    jQuerycontainer.isotope({ filter: selector });
    return false;
  });

});​
</script>

Any help is appreciated, thanks.

Answer 1

Ok, I was able to get the drop down working. I was not able figure out my second question though-

How to populate the drop down with the terms/child terms of the current category being viewed?

Here's how I got the drop down to work - The drop down --

<?php
$terms = get_terms("videoscategory");
 $count = count($terms);
 if ( $count > 0 ){
     echo "<select id='filter-select'>";
echo "<option value='*' data-filter-value='' class='selected'>All items</option>";
     foreach ( $terms as $term ) {
         echo "<option value='.{$term->slug}'>" . $term->name . "</option>";
     }
     echo "</select>";
 }
?>

 <div id="filters">

<select id="filter-select2">
 <option value="*" data-filter="*" class="selected">All items</option>
<option value=".product" class="current">Documents</option>
<option value=".videos" class="current">Videos</option>
<option value=".text" class="current">Text</option>    
<option value=".link" class="current">Links</option>  
</select>
</div>

<div id="isocontent">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $terms = get_the_terms( $post->ID, 'videoscategory' ); ?>
 <?php $post_type = get_post_type($post->ID); ?>
<div class="box<?php foreach( $terms as $term ) echo ' ' . $term->slug; ?><?php echo ' '.get_post_type( $post->ID ); ?>">

// The Content

</div>
<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>
</div>

The javascript --

<script type="text/javascript">
$( function () {

  var $container = $('#isocontent');

  $container.isotope({})

  $('#filter-select,#filter-select2').change( function() {
    $container.isotope({
      filter: this.value
    });
  });

});
</script>