jsで2軸のフィルター機能を作りたい

Question

###前提・実現したいこと
jsで2軸のフィルター機能を作りたいです。
下記のところまで実装して1軸に対してのフィルターは出来たのですが、この先どうすれば良いかわからず。。。

やりたいこととして2つのフィルター(カテゴリー1とカテゴリー2)で掛け合わせてA and Bのソートがしたいです。

最終的には、#sel1でtest2を選択をした場合はtest2に当てはまるもののみ.portfolio-itemの単位表示し、その上で#sel2でtest4を選択した場合はtest2かつtest4に当てはまるものを.portfolio-itemの単位で表示したいです。

例えば、#sel1のvalueが2の時に、span.categoryの1つめのクラスに2を含むものを（この場合は <option id="2" value="2">test2</option>）を.portfolio-item単位で表示する。#sel1のvalueが2、かつ#sel2のvalueが4の時は、span.categoryの1つめのクラスに2と2つめのクラスに4を含むもの（この場合は <span class="category 4 2">test4</span>）を.portfolio-item単位で表示したい。

###該当のソースコード
セレクトボタン

<div class="form-group">
<div>
  <label for="sel1">カテゴリー1</label>
  <select class="form-control" id="sel1">
    <option id="2" value="2">test2</option>
    <option id="3" value="3">test3</option>
</select>
</div>
<div>
 <label for="sel1">カテゴリー2</label>
  <select class="form-control" id="sel2">
    <option id="1" value="1">test</option>
    <option id="4" value="4">test4</option>
</select>
</div>
</div>

フィルターしたいコンテンツ

<div class="list-group">
     <div class="portfolio-item">
        <span class="category 2 1">test2</span>
        <span class="category 3 1">test3</span>
      <p>test</p>
    </div>
     <div class="portfolio-item">
        <span class="category 1 2">test1</span>
        <span class="category 4 2">test4</span>
      <p>test2</p>
    </div>
 </div>

.categoryクラスにの2つめに付いているクラスがフィルターの番号です。
.categoryクラスにの1つめに付いているクラスがフィルター内の値(option id)です。

$("#sel1").change(function(){
    var val = $(this).val();
    $('.category').each(function(){
      var category_val =  $(this).attr('class').split(" ")[1];
      if(val == category_val){
        $(this).parents('.portfolio-item').hide();
      }else{
        $(this).parents('.portfolio-item').show();
      }
    });
  });
$("#sel2").change(function(){
    var val = $(this).val();
    $('.category').each(function(){
      var category_val =  $(this).attr('class').split(" ")[1];
      if(val == category_val){
        $(this).parents('.portfolio-item').hide();
      }else{
        $(this).parents('.portfolio-item').show();
      }
    });
  });

###追記

やりたいこととしては以下のサイトのように業種×⚪️⚪️のように2つのフィルターで両方に当てはまるものを表示させたいというイメージです。。。
https://www.cloudpayment.co.jp/service/payment/case/

Comments

[kei344]

「ソート」は並べ替えを意味しますが、書かれている内容は「フィルタ」のみです。最終的にどういう結果を得たいかを例示してください。

[dandandan]

ご回答ありがとうございます！修正しました。

[kei344]

まだ「ソート」が残っていますがそれは無視するとして、「表示」は「portfolio-item」の単位で表示非表示を切り替えるということでしょうか。組み合わせ方法がわかりにくいので、selectの状態がどのときに何と何を表示するかを列挙してください。

[dandandan]

たびたびすみません、修正しました！

[kei344]

「1つめのクラスに2と2つめのクラスに4を含むもの（この場合は <span class="category 4 2">test4</span>）」が右から数えて1つ目、二つ目ということでしょうか。

Answer 1

<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>

$( 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-*属性を使うのが良いと思います。

【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

Comments

[dandandan]

アドバイスありがとうございます。勉強になります。すみません、やりたい挙動としては以下のようにhttps://www.cloudpayment.co.jp/service/payment/case/ AとBのフィルターがあるとしてAだけの表示、Bだけの表示、AかつBの時の表示が出来ればと思っているのですが、、、。なおフィルターの中のoptionは動的に増えていくので全ての組み合わせの数は不明です。

[kei344]

サンプル置いておいたのですが、試されましたか？コメントで書かれている挙動をしているはずなのですが。

[think49]

> 数字のみは許容されていないので正しく取得できない可能性が高いです
HTML4.01 では許可されませんが、HTML5以上なら数字のみのclass名も許可されます。
セレクタエンジンを通すときにはエスケープしなければならず、論理構造を表した名前ではないので数字のみの名前をお勧めしない事には変わりありませんが…。

[kei344]

To: think49さん
指摘ありがとうございます。もしかしたら同じ内容に指摘いただくのが 2,3度目かもしれません、すみません。
指摘部分は編集しておきます。