jquery多下拉过滤菜单

2024-03-22

我根据多个下拉菜单选择隐藏和显示图片。我正在尝试让 2 个和可能更多的下拉菜单一起工作来优化搜索。

如果我在第一个下拉列表中选择一个项目,我想应用第二个过滤器,依此类推,以及任何其他下拉列表。

我需要一些关于 jquery 的帮助。我当前的问题是第二个过滤器永远不会启动。它会被覆盖并重置过滤器。如果可能的话,我想添加第三个过滤器来进一步缩小搜索范围,以准确找到我正在寻找的内容。这是一些示例代码..

$('select').change(function(){
var current = $(this).attr('value');

if(current == 'all'){
    $('#FilterContainer').children('div.all').show();
} 

else {

    $('#FilterContainer').children('div:not(.' + current + ')').hide();
$('#FilterContainer').children('div.' + current).show();
 }

  return false;
})

HTML

  <p>Filter: </p>
        <select class="filterby">
        <option value="all"><h5>Show All</h5></option>
        <option value="1"><h5>One</h5></option>
        <option value="2"><h5>Two</h5></option>
        <option value="3"><h5>Three</h5></option>
      </select>



      <p>Location: </p>
        <select class="filterby">
        <option value="all"><h5>All Locations</h5></option>
        <option value="nj"><h5>NJ</h5></option>
        <option value="ny"><h5>NY</h5></option>
        <option value="pa"><h5>PA</h5></option>
      </select>


  <div id="FilterContainer">

  <div class="all 1 nj">Test One NJ</div>
  <div class="all 1 ny">Test One NY</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 2 nj">Test Two NJ</div>
  <div class="all 2 ny">Test Two NY</div>
  <div class="all 2 pa">Test Two PA</div>
  <div class="all 3 nj">Test Three NJ</div>
  <div class="all 3 ny">Test Three NY</div>
  <div class="all 3 pa">Test Three PA</div>
  <div class="all 1 nj">Test One NJ</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 2 nj">Test Two NJ</div>
  <div class="all 2 ny">Test Two NY</div>
  <div class="all 2 ny">Test Two NY</div>

尝试这个 -

$("select.filterby").change(function(){
    var filters = $.map($("select.filterby").toArray(), function(e){
        return $(e).val();
    }).join(".");
    $("div#FilterContainer").find("div").hide();
    $("div#FilterContainer").find("div." + filters).show();
});

with 现场演示 http://jsfiddle.net/6PrQW/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery多下拉过滤菜单 的相关文章

  • 如何将 STRUCT - OR - JSON 传递给 Coldfusion CFC 方法

    我有一个现有的 CFC 在将结构传递到方法中时可以正常工作 问题是 我们现在还需要通过 JSON 将数据传递到同一函数中 这是 CFC 片段
  • 转义 \u200b(零宽度空格)和其他非法 JavaScript 字符

    我有一组 JavaScript 对象 我引导到后端模板 以在页面加载时初始化我的 Backbone js 集合 它看起来像这样 作为 Twig 模板 我遇到的问题是某些文本字段包含 u200b 零宽度空格 这会破坏
  • Javascript:我应该隐藏我的实现吗?

    作为一名 C 程序员 我有一个习惯 将可以而且应该私有的东西设为私有 当 JS 类型向我公开其所有私有部分时 我总是有一种奇怪的感觉 而且这种感觉并没有被 唤起 假设我有一个类型draw方法 内部调用drawBackground and d
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • Next.js:错误:React.Children.only 期望接收单个 React 元素子元素

    我有一个名为Nav inside components目录及其代码如下所示 import Link from next link const Nav gt return div a Home a a About a div export d
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • 如何在新窗口中打开图像或pdf文件?

    我有一个 gridview 它包含文件名和文件路径 图像和 pdf 格式文件 其中我使用了模板字段 在该字段下放置了 1 个图像按钮 单击该图像按钮 即 查看 按钮 时 我想在新窗口中打开所选文件 这是我的代码 protected void
  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http
  • jQuery 中什么函数相当于 .SelectMany()?

    让我解释一下 我们知道 jQuery 中的映射函数充当 Select 如 LINQ 中 tr map function return this children first returns 20 tds 现在的问题是我们如何在 jQuery
  • 使用jquery调用AS3外部接口

    我正在使用ExternalInterface 调用嵌入在html 页面中的Flash 应用程序 以下代码工作正常 我正在使用按钮进行测试 document ready function button click function var a
  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮
  • 使用ExternalInterface和IE从JavaScript获取Flash中的当前URL

    我正在尝试获取 Flash 播放器当前所在的 URL 不是 swf 文件的 URL 而是浏览器指向的 URL 到目前为止我已经使用过 var st String ExternalInterface call window location
  • 如何为 jQuery 插件设置私有变量?

    我想创建一个简单的插件 它使用元素的文本作为默认值 或者您可以在调用插件时设置此值 但是 如果我不设置该值 并为多个元素调用插件 则默认值会成倍增加 function fn reText function options var setti
  • Keycloak-js updateToken(minValidity) 需要澄清

    我在Keycloak js中阅读了很多该方法的示例 但没有对以下方法进行明确的解释 updateToken minValidity number KeycloakPromise
  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than
  • Jquery 以编程方式更改

    文本

    编辑 解决方案是将其添加到个人资料页面而不是性别页面 profile live pageinit function event p pTest text localStorage getItem gender 我在列表视图中有一个带有一些文

随机推荐

  • 如何以编程方式启用 Visual Studio 扩展

    我创建了一个 Visual Studio 扩展并将其打包在 Visual Studio 安装程序中 现在 当我安装安装程序时 vsix 已安装 并且也可以在扩展管理器窗口中看到 但处于禁用状态 我尝试过为扩展添加注册表项等方法 但同样没有用
  • 在 64 位 Python 上使用 sys.platform=='win32' 检查是否安全?

    区分在 Windows 和其他操作系统 通常是 Linux 上运行的 Python 应用程序的通常检查是使用条件 if sys platform win32 但我想知道在过去几年64位Python得到更广泛使用的今天使用安全吗 32 真的意
  • 计算列的时间总和

    我有这张表 table border 1 width 100 tbody tr td Total duration time td td class total duration time td tr tbody table table b
  • 将 Chrome 开发控制台转储到文本文件?

    有时 当我尝试调试用户在使用我的 Chrome 扩展程序 StayFocusd 时遇到的问题时 访问控制台日志会很有用 现在我只是要求他们将日志复制并粘贴给我 但如果我能够以编程方式生成一个文件 他们可以通过电子邮件发送给我 那就更好了 那
  • 函数指针的函数模板专业化

    我有一个清理函数 我只想在 传统 指针类型上运行 我的问题是函数模板 我可以将函数限制为仅指针 但是由于函数指针和常规指针之间的转换规则差异 我遇到了问题 The Sanitize 函数需要针对大量类型运行 其中一些是指针 需要进行清理 其
  • 上传文件 spring boot 所需的请求部分“文件”不存在

    我想为我的 Spring Boot 应用程序添加上传功能 这是我的上传休息控制器 package org sid web import java io BufferedOutputStream import java io File imp
  • 使用 numpy 数组左移大量数字

    Python确实可以左移一位大整数 1L lt lt 100 1267650600228229401496703205376L 但 NumPy 似乎有一个问题 a np array 1 2 100 output np left shift
  • 复制大文件时如何避免 StorageFile.CopyAsync() 抛出异常?

    我将通过以下方式将一些文件从视频库复制到我的应用程序存储StorageFile CopyAsync 方法 但如果文件大小超过1GB 则会抛出异常 如下所示 类型 System Runtime InteropServices COMExcep
  • 如何以编程方式在 Android 中加入 2 个联系人?

    我需要知道是否可以加入两个或多个联系人 以编程方式 使用联系人 android API 或其他方式 例如 我有一个联系人 Axel Rose 有一个电子邮件帐户和电话号码 我注意到一些应用程序 如 Whatsapp Facebook 和 S
  • 如何更改物料表操作字段图标

    actions icon edit tooltip Edit User onClick event rowData gt alert You are editing rowData name icon delete tooltip Dele
  • 从物化路径构建 JSON 树

    我计划在 MongoDB 中使用物化路径来表示树 并且需要将物化路径转换回 JSON 树 前任 物化路径 var input id 0 path javascript id 1 path javascript database id 2 p
  • 将本地 TIMESTAMP 转换为 UTC 时间

    我有两张带有时间戳的表 TABLE1带有当地时间的 TIMESTAMP TABLE2带有 UTC 时间戳 我需要做类似的事情 select count from TABLE1 where TIME STAMP gt TABLE2 TIME
  • 我可以从打开的文件中读取新数据而不重新打开它吗?

    考虑有一个文件test txt其中有一些随机文本 现在我们运行以下代码 f open test txt r f read 现在我们将数据附加到test txt来自其他一些进程 有没有办法不用重新打开f我们可以read新数据 这个问题仅限于P
  • 我如何使用 ie6 测试我的网站

    我在最新的 Firefox 中开发了一个网站 然后在一台只有 ie6 的机器上展示了它 看起来很糟糕 无论如何 我可以测试它在 IE6 中的外观 而无需实际下载 我看到ie8有一个兼容模式 以显示它在ie7中的样子 ie 6有类似的东西吗
  • Cassandra 0.8 = 提供什么样的“行计数”功能?

    同时支持 Cassandra 中的 行计数 在 CF 中 a 随机分区器 b OrderPreservingPartitioner http www datastax com dev blog whats new in cassandra
  • 如何删除 TextBox 控件的默认上下文菜单? C#

    如何删除默认的上下文菜单TextBox控制 有属性可以禁用它吗 谢谢 您还可以设置ShortcutsEnabled财产给false 这将删除默认的上下文菜单和所有剪贴板功能 我想这就是你试图抑制菜单的原因 除了故意阻止用户使用复制 粘贴之外
  • C++:使用 CRTP,派生类中定义的类无法在基类中访问

    这是 简化的 基类 template
  • 模拟单元测试中时间的流逝

    我已经为客户构建了一个付费 CMS 发票系统 我需要更加严格地进行测试 我将所有数据保存在 Django ORM 中 并有一堆以不同时间间隔运行的 Celery 任务 以确保发送新发票和发票提醒 并在用户不支付发票时切断访问权限 例如 我希
  • Quartz.Net 和在链接作业之间传递数据

    我必须实施一个简单的工作流程 某些作业 A 必须在指定时间运行 cron 触发器 该作业搜索未处理的数据 比如说一些 IThingToDo 并对其进行处理 作业 B 必须在作业 A 完成后立即执行 并且已处理的数据列表 ITingToDo
  • jquery多下拉过滤菜单

    我根据多个下拉菜单选择隐藏和显示图片 我正在尝试让 2 个和可能更多的下拉菜单一起工作来优化搜索 如果我在第一个下拉列表中选择一个项目 我想应用第二个过滤器 依此类推 以及任何其他下拉列表 我需要一些关于 jquery 的帮助 我当前的问题