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

Question

Please review my Demo Fiddle

If you select an option from a menu, it will match up with another corresponding option.

In the first menu, if you select a type of exam, it will match up with an appropriate course result.

Additionally, the second menu allows you to select a course, and the appropriate exam result will be displayed.

For example - If you select American Literature or Introduction to Educational Psychology , the result displayed is Free Elective

However, if in the menu below, you select Free Elective , the only course that comes up is American Literature , and not the other Introduction to Educational Psychology .

How can I select Free Elective and have it display a list of classes associated, and not just one?

Here is my JS ...

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

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

Answer 1

To begin with, you cannot have duplicate IDs in the DOM.

So, remove free_elective as an id & make it a 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