> For the complete documentation index, see [llms.txt](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/quan-yu-xing-gong-neng/shai-xuan-sou-xun-gong-neng/duo-ceng-ji-shai-xuan-gong-neng-lie.md).

# 多層級篩選功能列

### 功能簡述

{% hint style="info" %}

* 於特定列表頁面，提供使用者以多個篩選下拉選單(2-3個)，針對資料列表，進行多層級篩選，簡化列表內容複雜程度，方便使用者快速尋找所需的資料內容
* 多層級篩選功能，主要使用於資料的欄位屬性有樹狀結構時，使用者需先選擇第一個分類篩選後，才會連動篩選其餘分類篩選，並依照篩選條件，顯示資料內容。
* 多數單元頁面，預設均會帶入第一個分類項目，以達到簡化資料複雜度效果\
  ＊部分單元頁面會依照客戶端需求，調整為顯示『全部』
* 使用單元頁面：
  * [3.2-賽事影音列表-賽事直播頁籤-賽事直播區塊](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.2-sai-hui-ying-yin-lie-biao.md#sai-shi-zhi-bo-ye-qian)
  * 4.1-賽程成績-分組賽程頁籤
  * [4.2.1-運動種類內頁-運動項目區塊](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.2-yun-dong-zhong-lei-lie-biao/4.2.1-yun-dong-zhong-lei-nei-ye.md#id-2-yue-geng-xin-516-qian)
  * [4.3-帕拉項目](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.3-pa-la-xiang-mu.md)
  * [4.6-醫療服務-防護治療頁籤](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.6-yi-liao-fu-wu.md#fang-hu-zhi-liao-ye-qian)
  * [4.6-醫療服務-責任醫院頁籤](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/4.0-jing-sai-zi-xun/4.6-yi-liao-fu-wu.md#ze-ren-yi-yuan-ye-qian)
    {% endhint %}

### 設計規格

<div align="left"><figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2F7jXM5aI8nTxF4crT7VOc%2FFrame%20627276.png?alt=media&amp;token=d592eb46-a638-4716-8408-d29306ff3eee" alt=""><figcaption></figcaption></figure></div>

1. **篩選方式**
   1. 預設第一個分類篩選，會帶入第一個項目，並連動第二個＆第三個分類篩選，帶出符合條件的篩選項目與資料列結果
   2. 各分類帶出第一個項目的項目順序，則依照各資料清單的排序為準
   3. 使用情境範例，說明如下：
      1. 若全部資料共有5筆，項目如下表\ <img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2Feqt6zTpXSal6isVEnjDo%2FFrame%20627277.png?alt=media&amp;token=c800bc50-2880-49ee-861f-9320d98bab40" alt="" data-size="original"><br>

      2. 預設狀態

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2Foz3z1GN7NrHSmhLcqrJP%2FFrame%20627272.png?alt=media&amp;token=f2d67f28-0f6a-415a-ae9a-3ed24ec84c57" alt=""><figcaption><p>帶入縣市第一個項目台北市，連動區域＆捷運站，顯示符合篩選條件的資料：101大樓</p></figcaption></figure>

      3. 選擇不同縣市

         <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FNNLC1XM588ZcWeXONEA0%2FFrame%20627273.png?alt=media&amp;token=d60c4cc7-5322-49eb-94ee-4d46b8878761" alt=""><figcaption><p>選擇新北市，連動區域＆捷運站，顯示符合篩選條件的資料：林家花園＆新北圖書館</p></figcaption></figure>

2. **項目總數**
   1. 依照目前篩選條件，顯示結果數量總數

***

### 修訂紀錄

<table data-full-width="false"><thead><tr><th width="111" data-type="number">序號</th><th>修訂時間</th><th>主要修改內容</th><th>修訂來源</th><th>備註</th></tr></thead><tbody><tr><td>null</td><td></td><td></td><td></td><td></td></tr></tbody></table>