文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >基于下拉值显示匹配嵌套子div

问基于下拉值显示匹配嵌套子div
EN

Stack Overflow用户
提问于 2021-11-12 16:22:57
回答 2查看 52关注 0票数 0

对不起，我是JQuery的新手，我发现有类似问题的帖子，但对我的情况没有帮助。我正在尝试获取所有匹配的div，其中包含类似于这的下拉选择值。

HTML -- JQuery代码片段：

​

代码语言：javascript
复制
$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $("#product_box .overflow-hidden p").each(function() {
          $(this).not("p:contains(" + optionValue + ")").hide();
        });
        $(this).show();
      } else {
        $("#product_box .overflow-hidden p").show();
      }
    });
  }).change();
});
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
  <select>
    <option>Choose following</option>
    <option value="Bestron">Bestron</option>
    <option value="Hanseatic">Hanseatic</option>
    <option value="Samsung">Samsung</option>
    <option value="AEG">AEG</option>
    <option value="Gorenje">Gorenje</option>
  </select>
</div>
<div class="row" id="product_box">
  <h4 class="mt-0 mb-2 header-title col-md-12">
    Products
  </h4>
  <div class="col-xl-3 col-md-6">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden" id="Bestron">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Bestron</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Klimagerät</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
          <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">A</span></p>

          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Hanseatic</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Backofen</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>



          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6">
    <div class="card-box widget-user" style="padding:1rem!important;">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123 Frontlader</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>
</div>
<!-- end col -->
<div class="col-xl-3 col-md-6">
  <div class="card-box widget-user" style="padding:1rem!important;">

    <div class="media-body overflow-hidden">
      <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">AEG</span></p>
      <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123</span></p>
      <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
      <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
      <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

      <hr style="height: 1px;background:#e8e8e8;" class="my-2">

    </div>
  </div>
</div>
</div>
<!-- end col -->
<div class="col-xl-3 col-md-6">
  <div class="card-box widget-user" style="padding:1rem!important;">
    <div class="media">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123 Frontlader</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">C</span></p>
        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>
</div>
<!-- end col -->
<div class="col-xl-3 col-md-6">
  <div class="card-box widget-user" style="padding:1rem!important;">

    <div class="media-body overflow-hidden">
      <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
      <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Side by side Kühlschrank</span></p>
      <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">52232548</span></p>
      <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">117392336</span></strong></p>
      <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

      <hr style="height: 1px;background:#e8e8e8;" class="my-2">

    </div>
  </div>
</div>

​

如果我的发问方式不符合相关门户网站的标准，我很抱歉。

javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-12 17:10:31

这就是你要的。我使用了你的代码，但增加了一些修改。你必须正确地搜索元素。

​

代码语言：javascript
复制
$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".card-box").parent().each(function() {
          $(this).not(':contains('+ optionValue +')').hide();
          $(':contains('+ optionValue +')').show();
        });
        $(this).show();
      } else {
        $(".card-box").parent().show();
      }
    });
  }).change();
});
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
  <select>
    <option>Choose following</option>
    <option value="Bestron">Bestron</option>
    <option value="Hanseatic">Hanseatic</option>
    <option value="Samsung">Samsung</option>
    <option value="AEG">AEG</option>
    <option value="Gorenje">Gorenje</option>
  </select>
</div>
<div class="row" id="product_box">
  <h4 class="mt-0 mb-2 header-title col-md-12">
    Products
  </h4>
  <div class="col-xl-3 col-md-6">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden" id="Bestron">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Bestron</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Klimagerät</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
          <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">A</span></p>

          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Hanseatic</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Backofen</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>



          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6">
    <div class="card-box widget-user" style="padding:1rem!important;">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123 Frontlader</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>
</div>
<!-- end col -->
<div class="col-xl-3 col-md-6">
  <div class="card-box widget-user" style="padding:1rem!important;">

    <div class="media-body overflow-hidden">
      <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">AEG</span></p>
      <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123</span></p>
      <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
      <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
      <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

      <hr style="height: 1px;background:#e8e8e8;" class="my-2">

    </div>
  </div>
</div>
</div>
<!-- end col -->
<div class="col-xl-3 col-md-6">
  <div class="card-box widget-user" style="padding:1rem!important;">
    <div class="media">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123 Frontlader</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">C</span></p>
        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>
</div>
<!-- end col -->
<div class="col-xl-3 col-md-6">
  <div class="card-box widget-user" style="padding:1rem!important;">

    <div class="media-body overflow-hidden">
      <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
      <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Side by side Kühlschrank</span></p>
      <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">52232548</span></p>
      <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">117392336</span></strong></p>
      <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

      <hr style="height: 1px;background:#e8e8e8;" class="my-2">

    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2021-11-12 16:42:43

您可以给每个“方框”一个data-manufacture (或简称data-manu )，例如data-manu='samsung'，然后可以使用[data-x]选择器一次将它们全部隐藏起来：

代码语言：javascript
复制
$("#product_box [data-manu]").hide();

并显示与select与[data-x="value"]选择器匹配的选择器。

代码语言：javascript
复制
$("#product_box [data-manu='" + $(this).val() + "']").show();

(其中this是select)

有些原始的HTML并不完全匹配，所以我将所有的“卡片”移到"product_box“中，以便它们正确地显示/隐藏，给出了一个大大简化的结果：

​

代码语言：javascript
复制
$(document).ready(function() {
  $("select").change(function() {
    $("#product_box [data-manu]").hide();
    $("#product_box [data-manu='" + $(this).val() + "']").show();
  }).change();
});
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
  <select>
    <option>Choose following</option>
    <option value="bestron">Bestron</option>
    <option value="hanseatic">Hanseatic</option>
    <option value="samsung">Samsung</option>
    <option value="aeg">AEG</option>
    <option value="gorenje">Gorenje</option>
  </select>
</div>

<div class="row" id="product_box">
  <h4 class="mt-0 mb-2 header-title col-md-12">
    Products
  </h4>
  <div class="col-xl-3 col-md-6" data-manu="bestron">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden" id="Bestron">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Bestron</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Klimagerät</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
          <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">A</span></p>

          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6" data-manu="hanseatic">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Hanseatic</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Backofen</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>



          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6" data-manu="samsung">
    <div class="card-box widget-user" style="padding:1rem!important;">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123 Frontlader</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6" data-manu="aeg">
    <div class="card-box widget-user" style="padding:1rem!important;">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">AEG</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6" data-manu="samsung">
    <div class="card-box widget-user" style="padding:1rem!important;">
      <div class="media">

        <div class="media-body overflow-hidden">
          <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
          <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">123 Frontlader</span></p>
          <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">123</span></p>
          <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">123</span></strong></p>
          <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">C</span></p>
          <hr style="height: 1px;background:#e8e8e8;" class="my-2">

        </div>
      </div>
    </div>
  </div>
  <!-- end col -->
  <div class="col-xl-3 col-md-6" data-manu="samsung">
    <div class="card-box widget-user" style="padding:1rem!important;">

      <div class="media-body overflow-hidden">
        <p class="text-muted font-13 my-0"><strong>Brands :</strong><span class="ml-2">Samsung</span></p>
        <p class="text-muted font-13 my-0"><strong>Group :</strong><span class="ml-2">Side by side Kühlschrank</span></p>
        <p class="text-muted font-13 my-0"><strong>Article No. :</strong><span class="ml-2">52232548</span></p>
        <p class="text-muted font-13 my-0"><strong>Lager:<span class="ml-2">117392336</span></strong></p>
        <p class="text-muted font-13 my-0"><strong>Grade :</strong><span class="ml-2">B</span></p>

        <hr style="height: 1px;background:#e8e8e8;" class="my-2">

      </div>
    </div>
  </div>

​

如果您无法更改HTML (如由第三方服务提供的)，那么我建议您使用“预运行”在doc.ready中一次性添加所需的数据属性。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69946030

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档