动态填充下拉菜单答案

【问题标题】：Dynamically populate dropdown menu动态填充下拉菜单
【发布时间】：2016-08-22 17:47:57
【问题描述】：

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

<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>

【问题讨论】：

标签： jquery css forms menu dropdown

【解决方案1】：

一个简单的 jQuery sn-p 来更改第二个下拉列表中的选定值，如下所示：

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

【讨论】：