複数のクラスを持つdivを表示/非表示にするにはどうすればよいですか？

私はコーディングにまったく新しいものです。私はこの問題について数日間の研究をしましたが、行き詰まってしまいました。複数のクラスを持つdivを表示/非表示にするにはどうすればよいですか？

私はチュータープロファイルを含む一連のdivで簡単なWebページを持っています。各部門には、各教師が教えることができるすべての科目を含む複数のクラスがあります。重複があります。たとえば、多くのチューターは代数1を教えることができます。そのため、ドロップダウンで「代数1」を選択すると、divクラスの「代数1」のチューターのみが表示されます。誰かが「すべてのアイテム」オプションを選択すると、すべてのプロファイルが再び表示されます（これは問題ありません）。ページが読み込まれると、すべてのプロファイルが表示されます（正常に動作しています）。

問題は、ドロップダウンが4番目のオプションである代数2を超えて動作しなくなることです。なぜですか？これをどうやって解決するのですか？私がやろうとしていることを簡単にする方法はありますか？

CODE（私は別のStackOverflowの質問にいくつかのコードを発見し、この時点にそれを修正）：https://jsfiddle.net/hyptastic/d90kdmgg/

<select id="classes" multiple="multiple"> 
<option value="classes">all items</option> 
<option value="sixth-grade-math">6th Grade Math</option> 
<option value="algebra-one">Algebra 1</option> 
<option value="algebra-two">Algebra 2</option> 
<option value=“biology”>Biology</option> 
<option value=“calculus”>Calculus</option> 
<option value=“chemistry”>Chemistry</option> 
<option value=“english”>English</option> 
<option value=“geometry”>Geometry</option> 
<option value=“government-economics”>Government/Economics</option> 
<option value=“history”>History</option> 
<option value=“homework-help”>Homework Help</option> 
<option value=“physical-science”>Physical Science</option> 
<option value=“physics”>Physics</option> 
<option value=“pre-algebra”>Pre-Algebra</option> 
<option value=“pre-calculus”>Pre-Calculus</option> 
<option value=“spanish”>Spanish</option> 
<option value=“statistics”>Statistics</option> 
<option value=“test-prep”>Test Prep</option> 
</select> 

<div class="classes sixth-grade-math">Tutor 1</div> 

<div class="classes sixth-grade-math algebra-one">Tutor 2</div> 

<div class="classes sixth-grade-math algebra-one algebra-two">Tutor 3</div> 

<div class="classes sixth-grade-math algebra-one algebra-two biology">Tutor 4</div> 

<div class="classes biology">Tutor 5</div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Javascriptを：あなたがあなたの引用符を台無しに

$('#classes').on('change', function() { 
var number = $(this).val(); 
var classNames = '.' + number.join('.'); 
$(".classes").hide().filter(classNames).show(); 
});

出典

2017-03-25 user7767099