JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<div class="filtro bg_branco full">
<span class="left">Filtrar cursos por:</span>
<!-- Cidade -->
<div class="cidade left">
<label class="left">Cidade</label>
<select id="cidade" class="option-set clearfix" data-filter-group="cidade">
<option value="*" data-filter-value="" class="selected">Qualquer Cidade</option>
<option value="#filter-cidade-cidade1" data-filter-value=".cidade1">Cidade 1</option>
<option value="#filter-cidade-cidade2" data-filter-value=".cidade2">Cidade 2</option>
<option value="#filter-cidade-cidade3" data-filter-value=".cidade3">Cidade 3</option>
<option value="#filter-cidade-cidade4" data-filter-value=".cidade4">Cidade 4</option>
<option value="#filter-cidade-icdade5" data-filter-value=".icdade5">Cidade 5</option>
<option value="#filter-cidade-cidade6" data-filter-value=".cidade6">Cidade 6</option>
<option value="#filter-cidade-cidade7" data-filter-value=".cidade7">Cidade 7</option>
<option value="#filter-cidade-cidade8" data-filter-value=".cidade8">Cidade 8</option>
<option value="#filter-cidade-cidade9" data-filter-value=".cidade8">Cidade 9</option>
<option value="#filter-cidade-cidade10" data-filter-value=".cidade8">Cidade 10</option>
</select>
</div>
<!-- Instituição -->
<div class="escola left">
<label class="left">Instituição</label>
<select id="escola" class="filter option-set clearfix" data-filter-group="escola">
<option value="*" data-filter-value="" class="selected">Todas instituições</option>
<option value="#filter-escola-escola1" data-filter-value=".escola1">Escola 1</option>
<option value="#filter-escola-escola2" data-filter-value=".escola2">Escola 2</option>
<option value="#filter-escola-escola3" data-filter-value=".escola3">Escola 3</option>
<option value="#filter-escola-escola4" data-filter-value=".escola3">Escola 4</option>
<option...
CSS
*{margin:0;padding:0;outline:0;list-style:none;font-family:arial;}
a, a:hover{text-decoration:none;color:red;}
.curso{width:33.333333333333336%;position:relative;}
/* Filtro */
.filtro{line-height:30px;padding:10px;font-size:16px;background:rgba(0,0,0,0.2);}
.cidade label, .escola label{margin:0 2px;}
.cidade.left, .escola.left{margin:0 2px;}
.full{width:100%;float:left;}
.left{float:left;}
/* cursowrapper */
#cursowrapper{padding:15px;}
.sem-resultados {
display: none;
}
JavaScript
$(function(){
var $container = $('.isotope'),
$message = $('.message-div'),
filters = {};
$container.isotope({
itemSelector : '.produkt-element',
transitionDuration: "0"
});
$container.isotope("on", "layoutComplete", function() {
setTimeout(function() {
$(".isotope.full").each(function() {
var semResultados = $(this).find(".sem-resultados");
var algumVisivel = $(this).find("li:visible").length > 0;
semResultados.toggle(!algumVisivel);
});
}, 0);
});
// filter buttons
$('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 ] )
}
console.log(filters);
var selector = isoFilters.join('');
$(".sem-resultados").hide();
$container.isotope({ filter: selector });
return false;
});
$('ul>li').click(function() {
var $this = $(this);
var group = $this.parent().data('filter-group');
filters[ group ] = $this.data('filter-value');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
console.log(filters);
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});