jQuery - 根据下拉选项选择列出结果

Question

请查看我的演示小提琴

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

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

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

例如 - 如果您选择美国文学或教育心理学简介 ，则显示的结果是自由选择

但是，如果在下面的菜单中选择Free Elective ，那么唯一的课程就是美国文学 ，而不是其他的教育心理学导论 。

如何选择Free Elective并让它显示相关的类列表，而不仅仅是一个？

这是我的JS ......

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

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

Answer 1

首先，您不能在DOM中拥有重复的ID。

因此，删除free_elective作为id并使其成为一个class 。

HTML

<div class="clep free_elective" style="display: none"> American Literature </div>
<div class="clep free_elective" style="display: none"> Introduction to Educational Psychology </div>

jQuery的

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

JSFIDDLE DEMO