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

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


## 回報流程

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


<!-- 解答：

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| albee#9121 |[Codepen](https://codepen.io/albee-chang/pen/eYKKxQo?editors=1111)|
| shinyhung#3825 |[Codepen](https://codepen.io/sean_1215/pen/rNKKRNB?editors=1111)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/xxzzMNw?editors=1011)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/wvXXOoY?editors=0010)|
|法希娜#3206|[CodePen](https://codepen.io/yiiserpf-the-encoder/pen/BaVVbZq?editors=1111)|
|Loran#1105|[CodePen](https://codepen.io/loranlin/pen/WNyymRP?editors=0011)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/BaVVbNV?editors=1010)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/OJEEqZa)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/zYaabMN)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/jOKKdgQ)|
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/MWXXxLy)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/abKKxZE?editors=1010)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/VwddNYB)|
| mandylai#4055 |[Codepen](https://codepen.io/mandy-lai-2/pen/JjZZzVr)|
| 楓之聲#6945 |[Codepen](https://codepen.io/sshane258/pen/gOKKyxV)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/Poaagyq)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/QWxxPxG)|
|Clara#1275|[CodePen](https://codepen.io/bsupixqu/pen/KKeeEwJ?editors=0011)|
|hannah#2224|[CodePen](https://codepen.io/hangineer/pen/eYKjevO?editors=1011)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/dyKjyQJ)|
|jimmyFang#9575|[CodePen](https://codepen.io/pohxiqqo/pen/bGKjprr?editors=1011)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/qBKxRqM) |
|Kimi #9564|[CodePen](https://codepen.io/kimihu91/pen/ZERRPRQ)|
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/eYKjyzg)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/eYKjjBq?editors=1011)|
|粉蒸肉#6214|[codepen](https://codepen.io/wrightyu/pen/OJEwwXQ?editors=1011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/NWzzJWL) |
|yen#5757|[codepen](https://codepen.io/Amberhh/pen/NWzzJWL) |
|m_m#5493|[CodePen](https://codepen.io/minnn7716/pen/jOKvrZd)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/vYrzyjO) |
|beta lin#1445|[CodePen](https://codepen.io/linbeta/pen/zYaJNNO)|
|SASIMI#5099|[CodePen](https://codepen.io/sashimi1327/pen/MWXXNEm)|
|WEI_RIO#9342|[Codepen](https://codepen.io/wei_wu/pen/NWzzmNP?editors=1011)|
|Barret#1119|[codepen](https://codepen.io/barret0720/pen/bGKjjJZ?editors=1111)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/BaVqvNV?editors=1011)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/MWXzpeM)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/zYayORE??editors=1011)|
|黑白兔#0684|[codepen](https://codepen.io/johnny329/pen/xxzmqeR)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/VwdqGzm)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/yLEZxej?editors=1011)|
|Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/rNKEqOv)|
|蓁心#6229|[CodePen](https://codepen.io/tlorfrnl-the-typescripter/pen/KKBPJpz?editors=1011)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/YzjzwBL?editors=1011)|