仕組みとしては、対象外のアイテムに「d-none」というクラスを追加して非表示にしています。このクラス名は自由に変えられます。 既存のソースコードに組み込むときの注意点 絞り込み選択selectタグのname=”ABC”:絞り込み対象data-ABC 絞り込み選択optionタグのvalue=”XYZ”:絞り込み対象data-ABC=”XYZ” 全表示用のvalue値はallで統一する 例)地域で絞り込みたいとき <select class="js-filter" name="area"> <option value="all">全ての地域</option> <option value="東京">東京</option> </select> <div class="js-filter-item" data-area="東京">...</div> 関数呼び出しの最初の引数は「.」不要です。 m
![バニラなJavaScriptで複数項目対応の絞り込み検索スクリプトを書いてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/00cc478817c75e2729cd6bc043a8696f20530158/height=288;version=1;width=512/https%3A%2F%2Fblog.gurunpa.com%2Fcms%2Fwp-content%2Fuploads%2F2024%2F08%2Fnoimage-cat.jpg)