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

Question

请查看我的Demo Fiddle

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

在第一个菜单中，如果您选择一种考试类型，它将与适当的类(class)结果相匹配。

此外，第二个菜单允许您选择类(class)，并且将显示相应的考试结果。

例如 - 如果您选择美国文学或教育心理学概论，则显示的结果为自由选修

但是，如果在下面的菜单中选择自由选修，则唯一出现的类(class)是美国文学，而不是其他教育概论心理学。

我如何选择自由选修并让它显示相关类(class)的列表，而不仅仅是一个类(class)？

这是我的 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