Drop-down-Menü dynamisch auffüllen

Question

Was wäre der beste Weg, um ein Dropdown-Menü aufzufüllen, wenn Sie im ersten Menü eine Auswahl treffen, die das 2. Menü auffüllen würde, um nur bestimmte Elemente anzuzeigen? Hier ist mein Code.

<span class="title"><strong>Bag Model*</strong></span> 
<label for="dwfrm_emailsignup_customer_fname"></label> 
<select name="c_Consumers[address_state]" class="required errorclient" style="width:160px;" id="c_Consumers[address_state]"> 
<option selected="selected" value="">Select...</option> 
<option value="FlexTech">FlexTech</option> 
<option value="FlexTech-Lite">FlexTech Lite</option> 
<option value="FlexTech-Crossover">FlexTech Crossover</option> 
<option value="FlexTech-Single">FlexTech Single Strap</option> 
<option value="Supreme-Cart">Supreme Cart Bag</option> 
<option value="TM-Cart">TM Cart Lite</option> 
<option value="Custom">Custom Bag</option> 

</select> 

<span class="title2"><strong>Bag Color</strong></span> 
<label for="dwfrm_emailsignup_customer_fname"></label> 
<select name="c_Consumers[address_state]" class="required errorclient" style="width:160px;" id="c_Consumers[address_state]"> 
<option selected="selected" value="">Select...</option> 
<option value="Black">Black</option> 
<option value="Camo">Camo</option> 
<option value="Dark-Gray-Green">Dark Gray/Green</option> 
<option value="Lite-Gray-Black">Lite Gray/Black</option> 
<option value="Lite-Gray-Red">Lite Gray/Red</option> 
<option value="Lite-Gray-Yellow">Lite Gray/Yellow</option> 
<option value="Green-White">Green/White</option> 
<option value="Navy">Navy</option> 
<option value="Red">Red</option> 
<option value="Royal">Royal</option> 
<option value="White-Red">White/Red</option> 
<option value="White-Royal">White/Royal</option> 

</select> 

Answer 1

Eine einfache jQuery-Schnipsel die ausgewählten Werte in der zweiten Dropdown-Liste zu ändern, wie folgt aussehen:

die IDs

$('#firstDropdown').change(function(){ 
    if(this.value === 'FlexTech'){ 
    $('#secondDropdown').html('<option selected="selected" value="">Select...</option>'+'<option value="Green-White">Green/White</option>'+ 
     '<option value="Navy">Navy</option><option value="Red">Red</option>'+ 
     '<option value="Royal">Royal</option><option value="White-Red">White/Red</option>'+ 
     '<option value="White-Royal">White/Royal</option>'); 
    } else { 
    $('#secondDropdown').html(''); 
    } 
}); 

Ersetzen Sie eckige Klammern nicht entsprechend arbeiten. Arbeitsbeispiel finden Sie hier: http://codepen.io/westefan/pen/BzZROj