---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 41 - 商品篩選功能

問題
---
請同學實作「商品篩選」的功能，點擊 select 會呈現相對應類型的商品，如下圖：
> 可以使用此 [CodePen 模板](https://codepen.io/hexschool/pen/dyKOmpg?editors=1011)


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

請記得填入自己的 API 名稱
https://codepen.io/hexschool/pen/yLEVKXM?editors=1010

若不太清楚要怎麼做可看下方作業提示：

使用監聽事件選擇選單，
選單改變時觸發函式，
函式的部分為讀取選單的內容與 api 中的資料核對，
符合的資料則挑出來加入渲染。
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/vYbQrrE) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/bGzQKPr?editors=0011) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/bGzQKxW?editors=1011) |
| Berlin | [CodePen](https://codepen.io/3qberlin/pen/mdvQjER?editors=1011) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/LYqXBzN) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/WNPYKgY) |
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/mdvQjPR?editors=1011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/OJdawqE) |
| dora | [CodePen](https://codepen.io/dorayu/pen/RwvqYWM?editors=1011) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/poGQOEo?editors=0010) |
| 楓仔 | [CodePen](https://codepen.io/maplestartend/pen/JjxeapO) |
|Eden| [Codepen](https://codepen.io/iseden/pen/ZEwmPWV)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/RwvqdBZ?editors=1011) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/yLZQrrV?editors=1011) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/abXQgWo?editors=1011) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/abXPoBK?editors=1011) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/NWoyBVy) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/GRzPqPO?editors=1011) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/RwvEKPa)|
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/mdvaRqW) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/KKJrxdO)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/Vwgqqqx) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/jOdXjwz?editors=1011) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/xxMJyRx) |
| Oria | [CodePen](https://codepen.io/kajing/pen/eYxXMEM?editors=1011) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/JjxzmGN) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/XWOOwqe) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/poGMWoL?editors=0010) |
| Daylily | [CodePen](https://codepen.io/daylily/pen/zYbddGe) |

<!--快速複製
| Discord | [CodePen]() |
-->