<select id="sel1">
<option class="prodA">Product A</option>
<option class="prodB">Product B</option>
<option class="prodC">Product C</option>
<option class="prodD">Product D</option>
</select>

<select id="sel2">
<option></option>
<option class="prodA">Series A1</option>
<option class="prodA">Series A2</option>
<option class="prodA">Series A3</option>
<option class="prodA">Series A4</option>
<option class="prodB">Series B1</option>
<option class="prodB">Series B2</option>
<option class="prodB">Series B3</option>
<option class="prodB">Series B4</option>
<option class="prodC">Series C1</option>
<option class="prodC">Series C2</option>
<option class="prodC">Series C3</option>
<option class="prodC">Series C4</option>
<option class="prodD">Series D1</option>
<option class="prodD">Series D2</option>
<option class="prodD">Series D3</option>
<option class="prodD">Series D4</option>
</select>

<literal>
<style>
#sel2 .prodB,
#sel2 .prodC,
#sel2 .prodD {
  display:none;
}
</style>

<script>
jQuery(function($) {
  $("#sel1").change(function() {
    $("#sel2 option").hide();
    $("#sel2 ."+$(":selected", this).attr("class")).show();
    $("#sel2").val("");
  });
});
</script>
</literal>