Hide divs containing text equal to the selected text?

end goal is to only show the divs, containing the text equal to that of the select menu/dropdown. But I think I can make my way there if I could just figure out how to hide them. So I have a piece of HTML:

<select id="select">
<option selected>Show All</option>
<option>Red</option>
<option>Blue</option>
</select>

<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>
<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>

and some jQuery:

$("#select").change(function () {
var text = $(".text").text();
var option = $("#select  option:selected").text();
if(text === option)
$( ".option:contains(" + text + ")" ).parent('div').hide();
});

I feel like I tried various stuff, with no luck. If I set the value of the text to begin with, then it's easy, the trick here is to have the text to look for depend on the <select> so that in theory you would just have to add options to that. Any suggestions on this?