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