javascript - 按所选选项过滤和删除元素

Question

我正在尝试过滤 .row-body 下面的 div，以便仅在 .sessionactivity 文本与选择下拉列表中的选定文本匹配时显示。因此，在下面的示例中，第二个 .row-body div 将被删除，请参阅 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>

在 jQuery 中，我添加了字符串“Activity One”，但我需要它动态地来 self 卡住的选定文本。

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

经过一些研究后，以下代码片段似乎是可行的方法，但我正在努力将其放入上下文中。任何帮助都会很棒!

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

Answer 1

您可以避免使用 filter()，只需使用 :contains() 来检查 div 的内容与所选文本:

$(".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>