CODEWITHSUNDEEP
javascriptjquery
Millhorn
Millhorn

Reputation: 3176

jQuery - List result based on dropdown option selection

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();
    });
});

Upvotes: 0

Views: 105

Answers (1)

Venkata Krishna
Venkata Krishna

Reputation: 15112

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

Upvotes: 2

Related Questions