JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-3 col-md-offset-3">
<label for="Provincie">Provincie:</label>
<select name="selProvincie" class="keuze form-control" id="Provincie">
<option value="">Alle provincies</option>
<option value="drenthe">Drenthe</option>
<option value="flevoland">Flevoland</option>
<option value="gelderland">Gelderland</option>
<option value="groningen">Groningen</option>
<option value="limburg">Limburg</option>
<option value="nbrabant">Noord-Brabant</option>
<option value="nholland">Noord-Holland</option>
<option value="overijssel">Overijssel</option>
<option value="utrecht">Utrecht</option>
<option value="zeeland">Zeeland</option>
<option value="zholland">Zuid-Holland</option>
</select>
</div>
<div class="col-md-3">
<p>
<label for="merkAuto">Merk auto:</label>
<select name="selmerkAuto" class="keuze form-control" id="merkAuto">
<option value="">Alle merken</option>
<option value="audi">Audi</option>
<option value="volkswagen">Volkswagen</option>
</select>
</p>
</div>
</div>
<!--VERKOOP-->
<div class="rowbod">
<div class="col-md-4">
<h3>Verkoop</h3>
<table class="table table-condensed">
<tr class="item audi bmw volvo nholland">
<td><a href="#">Autohan</a></td>
<td>Zwanenburg</td>
</tr>
<tr class="item audi bmw lexus mercedes vw volvo nbrabant">
<td><a href="#">Auto Timon</a></td>
<td>Uden</td>
</tr>
<tr class="item...
CSS
/*!
* Bootstrap v3.0.3 (http://getbootstrap.com)
* Copyright 2013 Twitter, Inc.
* Licensed under http://www.apache.org/licenses/LICENSE-2.0
*/
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
a {
background: transparent;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
mark {
color: #000;
background: #ff0;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
padding: 0.35em 0.625em 0.75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
button,
input,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: 100%;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
padding:...
JavaScript
$(document).ready(function () {
$('select.keuze').change(function () {
var Provincie = $("#Provincie").val() || "item",
merkAuto = $("#merkAuto").val() || "item";
$(".item").hide().filter(function() {
return $(this).hasClass(Provincie) && $(this).hasClass(merkAuto);
}).show();
$(".col-md-4").show().filter(function() {
return $(this).find("tr:visible").length == 0;
}).hide();
});
});