Javascript 如何制作下拉菜单来显示/隐藏包含多个类的div？

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

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

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

代码我在另一个Stackoverflow问题上找到了一些代码，并对此进行了修改：

---

你把低值的报价弄乱了，道德是不要复制粘贴

---

“演算”与chrome 53和edge浏览器中的演算不同，如果选项值为生物学，则会运行错误

---

我以为你输入了错误的中文引号符号“”，你最好在之前检查一下它的符号编码。

哇，我永远也听不到。非常感谢你！现在可以了。

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

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