CODEWITHSUNDEEP
javascriptjquery
ultrarun
ultrarun

Reputation: 274

Filter and remove elements by selected option

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()

Upvotes: 3

Views: 1320

Answers (3)

Aagam Jain
Aagam Jain

Reputation: 1546

Here is how you can do it.

you can get selected values by $(this).val() in change event of dropdown.

And at the end manually triggering change event by calling $(".select-activity").change(); for initial selection.

$(".select-activity").change(function() {
  let filterVal = $(this).val();
  
  $('.row-body').hide();
  
  $('.sessionactivity').filter(function() {
    return $.trim($(this).text()) === filterVal;
  }).parent().show();
});

$(".select-activity").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-activity">
  <option value="Activity One">Activity One</option>
  <option value="Activity Two">Activity Two</option>
  <option value="Activity Three">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 Other Hall</div>
  </div>
</div>

Upvotes: 0

Pandurang
Pandurang

Reputation: 76

You are missing a "<" sign infront of option>Activity One</option> 

<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>

jQuery

$( ".select-activity" ).change(function() {
    var selected=$(this).val();
  $('.sessionactivity').filter(function(){
    return $.trim($(this).text()) !==selected;
   }).parent().remove(); 
});

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 2

Related Questions