Conditional group jQuery with classes in

I was wondering if the below is somehow actually possible? So a conditional JS based on classes within the <option> in order to create groups which show different elements based on their specific combination. The below scenario is a smaller situation than the actual situations, where I deal with 40x40 options and 8 different groups.

HTML

<select class="dropdown1">
<option class="SourceGrp1" value="S1">S1</option>
<option class="SourceGrp2" value="S2">S2</option>
<option class="SourceGrp1" value="S3">S3</option>
<option class="SourceGrp2" value="S4">S4</option>
</select>

<select class="dropdown2">
<option class="TargetGrp1" value="T1">T1</option>
<option class="TargetGrp2" value="T2">T2</option>
<option class="TargetGrp1" value="T3">T3</option>
<option class="TargetGrp2" value="T4">T4</option>
</select>

<div id="element1" class="hide">1</div>
<div id="element2" class="hide">2</div>
<div id="element3" class="hide">3</div>
<div id="element4" class="hide">4</div>

JS

$("#element1, #element2, #element3, #element4").addClass("hide");
$(".dropdown1, .dropdown2").change(function () {
    if( $(".SourceGrp1").val() && $(".TargetGrp2").val()) {
        $("#element2").removeClass("hide");
    }
});

It doesn't work, because I assume that the && forces that all class="SourceGrp1" and class="TargetGrp1" need to be selected, which is in a dropdown not possible. But is this theoretically possible, if so, what do I need to change in order to make the JS work?