如何使下拉菜单显示/隐藏具有多个类的 div？

我是编码新手，我已经对这个问题进行了几天的研究，但我已经走到了死胡同。

我有一个简单的网页，其中包含一系列包含导师简介的 div。每个 div 都有多个课程，每个课程都有每个导师可以辅导的所有科目。有重叠。例如，很多导师可以辅导代数1，所以当有人在下拉列表中选择“代数1”时，我只希望他们的div课上有“代数一”的导师出现。当有人选择“所有项目”选项时，我希望再次显示所有配置文件（工作正常）。当页面加载时，我希望显示所有配置文件（也可以正常工作）。

问题是下拉菜单在第 4 个选项后停止工作：代数 2。为什么？我该如何解决？有没有更简单的方法来做我想做的事情？

代码（我在另一个 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();
});