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”，但我需要使它动态地来自选定的选定文本，这就是我所卡住的地方。

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

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

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

Answer 1

您可以避免使用import ast d = "{'name': 'f5f891c1006142efc3c6ea431f2c5d8bd794cbe9a1695f6112586aad2d9e799e535f6b', 'quantity': '22', 'has_link': True, 'address': 'f5f891c1006142efc3c6ea431f2c5d8bd794cbe9a1695f6112586aad2d9e799e535f6b'}" print(ast.literal_eval(d))，而只需使用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();
});

Answer 2

您在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(); 
});

Answer 3

这是您的操作方式。

在下拉菜单发生更改时，您可以通过$(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>

通过选定的选项过滤和删除元素

3 个答案: