代码之家 › 专栏 › 技术社区 › ultrarun

按所选选项筛选和删除元素

jquery javascript

ultrarun · 技术社区 · 6 年前

我想过滤下面的潜水器 .row-body 只有当 .sessionactivity 文本与从“选择”下拉列表中选择的文本匹配。所以在下面的例子中 行体 将删除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”,但我需要它动态地来自所选文本,而这正是我被卡住的地方。

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

经过一些研究,下面的片段似乎是可行的方法,但我正在努力将其融入到上下文中。任何帮助都会很好!

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

3 回复 | 直到 6 年前

Ankit Agarwal 6 年前

你可以避免使用 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>

Pandurang 6 年前

您缺少“<”在前面签名 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(); 
});

Aagam Jain 6 年前

这是你的方法。

您可以通过以下方式获取所选值: $(this).val() 在下拉的更改事件中。

最后,通过调用 $(".select-activity").change(); 用于初始选择。

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