动态填充下拉菜单

Question

当您在第一个菜单上进行选择时，填充下拉菜单的最佳方式是填充第二个菜单以仅显示某些项目？这是我的代码。

<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

一个简单的jQuery片段来更改选定值在第二个下拉可以是这样的：

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

更换相应的ID，方括号不工作。 工作示例可在此处找到： http://codepen.io/westefan/pen/BzZROj