Question

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

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

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

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

但是，如果在下面的菜单中选择 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＆amp;将其设为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

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

1 个答案: