回答編集履歴

1 ミスがあったため修正。

kei344

kei344 score 61034

2017/04/22 21:23  投稿

```HTML
<div class="form-group">
   <div>
       <label for="sel1">カテゴリー1</label>
       <select class="form-control" id="sel1">
           <option value="">---</option>
           <option value=".cat1_1">test1</option>
           <option value=".cat1_2">test2</option>
           <option value=".cat1_3">test3</option>
           <option value=".cat1_4">test4</option>
       </select>
   </div>
   <div>
       <label for="sel2">カテゴリー2</label>
       <select class="form-control" id="sel2">
           <option value="">---</option>
           <option value=".cat2_1">test1</option>
           <option value=".cat2_2">test2</option>
       </select>
   </div>
</div>
<div class="list-group">
   <div class="portfolio-item">
       <span class="category cat1_2 cat2_1">test2</span>
       <span class="category cat1_3 cat2_1">test3</span>
       <p>test</p>
   </div>
   <div class="portfolio-item">
       <span class="category cat1_1 cat2_2">test1</span>
       <span class="category cat1_4 cat2_2">test4</span>
       <p>test2</p>
   </div>
</div>
```
```JavaScript
$( function() {
   var $_items = $( '.portfolio-item' );
   var $_sel1 = $( '#sel1' );
   var $_sel2 = $( '#sel2' );
   $( 'select.form-control' ).on( 'change', function() {
       $_items.hide();
       var c1 = $_sel1.val();
       var c2 = $_sel2.val();
       if ( c1 === '' && c1 === c2 ) {
           $_items.show();
       } else {
           $( c1 + c2 ).each( function() {
               $( this ).parent().show();
           } );
       }
   } );
} );
```**動くサンプル:**[https://jsfiddle.net/t904n14p/](https://jsfiddle.net/t904n14p/)
---
とりあえずクラスの書き方がおかしいです。数字のみは許容されていないので正しく取得できない可能性が高いです。また、質問文のように使用したいのであれば、data-*属性を使うのが良いと思います。
質問文のように使用したいのであれば、data-*属性を使うのが良いと思います。
【jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件 - Qiita】
[http://qiita.com/Kta-M/items/2eda39750abd10df9801](http://qiita.com/Kta-M/items/2eda39750abd10df9801)
---
↓指摘により削除↓
//////////////////////////////////////////////////////////////////////////////
× とりあえずクラスの書き方がおかしいです。数字のみは許容されていないので正しく取得できない可能性が高いです。
【[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 ・ GitHub】
[https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad](https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad)
【jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件 - Qiita】
[http://qiita.com/Kta-M/items/2eda39750abd10df9801](http://qiita.com/Kta-M/items/2eda39750abd10df9801)
https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る