Javascript jQuery-基于下拉选项选择列出结果

请回顾我的

如果从菜单中选择一个选项，它将与另一个相应的选项匹配

在第一个菜单中，如果您选择一种考试类型，它将与相应的课程结果相匹配

此外，第二个菜单允许您选择课程，并显示相应的考试结果

例如-如果选择美国文学或教育心理学导论，则显示的结果是免费选修

但是，如果在下面的菜单中，您选择了免费选修课，唯一出现的课程是《美国文学》，而不是另一门《教育心理学概论》

我如何选择免费选修课，并让它显示相关课程的列表，而不仅仅是一个

这是我的JS

$(function() {
    $('#clepSelector').change(function(){
        $('.class').hide();
        $('#' + $(this).val()).fadeIn();
    });
});

$(function() {
    $('#classSelector').change(function(){
        $('.clep').hide();
        $('#' + $(this).val()).fadeIn();
    });
});

---

首先，DOM中不能有重复的ID

因此，将

free\u optional

作为

id

删除并使其成为

类

HTML

旁注：您不需要两个单独的
$（函数（）{}）
（document.ready's）。您可以将所有事件处理程序放在一个内。Ok。结合奎师那的回答。。。这就是我需要的。谢谢你的设计@网蛙-很乐意帮忙。
<div class="clep free_elective" style="display: none"> American Literature </div>
<div class="clep free_elective" style="display: none"> Introduction to Educational Psychology </div>

$('#classSelector').change(function(){
    $('.clep').hide();
    $('.' + $(this).val()).fadeIn();
});