Filter and remove elements by selected option

Question

I'm trying to filter the divs below .row-body to only show when the .sessionactivity text matches the selected text from the select dropdown. So in the example below the second .row-body div would be removed, see jQuery...

<select class="select-activity">
    <option>Activity One</option>
    <option>Activity Two</option>
    <option>Activity Three</option>
</select>

<div id="today">
    <div class="row-body">
        <div class="sessionactivity">Activity One</div>
        <div class="sessionlocation">The Swimming Pool</div>
    </div>
    <div class="row-body">
        <div class="sessionactivity">Activity Two</div>
        <div class="sessionlocation">The Main Hall</div>
    </div>
</div>

In the jQuery I've added the string 'Activity One' but I need that to come dynamically from the select selected text which is where I'm stuck.

$('.select-activity').click(function() {
  $('.sessionactivity').filter(function() {
    return $.trim($(this).text()) !== 'Activity One';
  }).parent().remove(); 
});

After some research the following snippet seems to be the way to go but I'm struggling to put it into context. Any help would be great!

$(".select-actvity").children("option").filter(":selected").text()

Answer 1

You can avoid using filter() and simply use :contains() to check the content of the div with the selected text:

$(".select-activity").click(function() {
  var text = $.trim($('.select-activity option:selected').text());
  $('.row-body').hide();
  $('.row-body').find('div:contains('+text+')').parent().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-activity">
  <option>Activity One</option>
  <option>Activity Two</option>
  <option>Activity Three</option>
</select>

<div id="today">
  <div class="row-body">
    <div class="sessionactivity">Activity One</div>
    <div class="sessionlocation">The Swimming Pool</div>
  </div>
  <div class="row-body">
    <div class="sessionactivity">Activity Two</div>
    <div class="sessionlocation">The Main Hall</div>
  </div>
  <div class="row-body">
    <div class="sessionactivity">Activity Three</div>
    <div class="sessionlocation">The Main Hall</div>
  </div>
</div>