Bricks 中按 Select 筛选值条件隐藏其他筛选器

本文为付费教程的骨架翻译：场景与步骤按原文梳理，锁定部分的代码按 Bricks 官方机制补全实现，并已注明「补全实现」。未复制原文代码。

场景：互斥筛选器的联动隐藏

社区里一个非常典型的真实需求：页面上有一个地点查询循环，每条地点挂了四个自定义字段——交通方式（Select：Car / Motorcycle / Bicycle）、开车耗时（Range）、骑车耗时（Range）、步行耗时（Range）。

问题在于：同一地点可能同时支持多种交通方式，三种耗时字段都有值。访客选了「开车」却误把「骑车耗时上限」也调了，查询就会按互斥条件过滤，大量地点凭空消失。需求是：选了哪种交通方式，就只显示对应的耗时筛选器，隐藏其余两个。

注意：Bricks 1.10.3（2026-08-17 注：2.3.11 已改进查询过滤器可访问性，多选支持请以当前版实测为准） 起，Select 自定义字段的多选值不被支持（本教程基于单选场景）。

Step 1：搭建查询与筛选器

1. 在 Bricks 编辑器中设置一个 Posts 查询循环，并给每种自定义字段各加一个筛选器（Filter）：

   • 交通方式：Select/Radio（单选）

   • 开车耗时 / 骑车耗时 / 步行耗时：Range 类型

2. 字段组配置参考：Mode of transportation（Select，选项 Car/Motorcycle/Bicycle）+ 三个 Range 字段，且每个 Range 字段仅在编辑器中对应交通方式被选中时显示（ACF 条件逻辑）。

3. 这样编辑时数据是干净对应的：选了 Car 的地点，只有开车耗时被填写。

Bricks 的筛选器本身已经负责「按字段值过滤文章」，本教程只额外处理一件事：根据交通方式的选择，显示/隐藏对应的 Range 筛选器，防止访客设出互斥条件。

Step 2：按选项联动显隐（补全实现）

付费原文锁定，这里按 Bricks 机制补全实现。思路：给三个 Range 筛选器容器分别加自定义类名（如 .filter-car、.filter-motorcycle、.filter-bicycle），监听交通方式下拉的 change 事件，只显示匹配的那一个：

// 补全实现：根据交通方式选择联动显隐 Range 筛选器

document.addEventListener( 'DOMContentLoaded', function () {

  const transportSelect = document.querySelector( '#transport-filter select' ); // 交通方式下拉

  const rangeWrappers   = {

    car:        document.querySelector( '.filter-car' ),

    motorcycle: document.querySelector( '.filter-motorcycle' ),

    bicycle:    document.querySelector( '.filter-bicycle' ),

  };

  if ( ! transportSelect ) return;

  const apply = () => {

    const value = transportSelect.value.toLowerCase();

    Object.entries( rangeWrappers ).forEach( ( [ key, el ] ) => {

      if ( ! el ) return;

      el.style.display = ( key === value ) ? '' : 'none';

    } );

  };

  transportSelect.addEventListener( 'change', apply );

  apply(); // 页面加载时先执行一次，同步初始状态

} );

把这段 JS 放在页面自定义代码（Bricks 页面设置的 Scripts）或 Code 元素里，选择器 .filter-* 换成你在 Bricks 里给筛选器容器设置的实际类名。初始状态下默认显示与当前选中项对应的筛选器。

原理说明

• 核心逻辑是「一个单选值 → 一组显隐映射」：值匹配的显示，其余隐藏。映射关系清晰，也方便扩展更多交通方式。

• 显隐只做 CSS display 切换，不销毁 DOM，Bricks 筛选器状态（已填的值）得以保留，来回切换不丢数据。

• 初次加载调用一次 apply() 很重要：URL 参数或默认值带来的初始状态必须和筛选器可见性一致。

• 如果筛选器重渲染（如 AJAX 刷新列表后 DOM 被替换），需要改用事件委托或在 Bricks 的重渲染回调里重新绑定。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

常见误区与性能提示

几个坑：一是联动显隐只用 CSS display:none，筛选器还在 DOM 里、提交时会带空值，最好配合查询条件一起隐藏；二是选项互斥逻辑写在 JS 里却没做防抖，快速切换会抖动；三是忘了给「无选项」状态兜底，全部隐藏后页面一片空白。性能上，筛选器多时把查询缓存、或只在前端切显隐、不每次打查询，体验更顺。

小结

「按一个筛选器的值联动显隐其他筛选器」本质是纯前端的显隐映射，和查询本身无关。骨架思路：容器加类名 → 监听 change → 匹配则显示。锁定部分按 Bricks 机制补全实现，类名与选择器请按你的模板调整。

小结：互斥筛选器的联动隐藏 = 单选值到容器类名的映射 + change 事件切换 display。注意初始状态同步与重渲染后的重新绑定两个细节。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

显隐筛选器用 CSS 还是查询条件？ 纯视觉隐藏用 CSS 即可；要影响查询结果就配合 Bricks 条件/查询参数一起控制。

切换抖动怎么修？ 给切换逻辑加防抖（debounce），避免快速操作重复触发。

全隐藏了怎么办？ 加一个「无可用选项」的兜底提示，别让页面留白。

筛选器多会拖慢吗？ 量大时缓存查询、或减少每次切换的数据库请求，体验更稳。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程