下拉菜单联动

需求呢是这样的：有两个下拉菜单，一个是类型，一个是名称，一个类型包含多个名称。

jsp代码如下：

<div class="toolbar pull-left">
  类型:
  <div style="display:inline-block;">
    <select id="selectType" class="form-control">
      <option value="please">请选择</option>
      <c:forEach items="${types}" var="t">
        <option value="${t.type}">${t.type}</option>
      </c:forEach>
    </select>
  </div>
</div>

<div class="toolbar pull-left" style="margin-left:20px;">
  名称:
  <div style="display:inline-block;">
    <select id="selectName" class="form-control">
      <option value="please">请选择</option>
      <c:forEach items="${charts}" var="c">
        <option value="${c.name}" class="cascadeNames" group="${c.type}">${c.name}</option>
      </c:forEach>
    </select>
  </div>
</div>

传过来的charts对象中是包含type和name的属性的，而类型中的值不是通过传charts对象，而是在后台实现去重后重新生成的一个对象。所以只需要符合以下条件即可实现两个下拉菜单的关联。

当选中类型菜单中的某个值时，charts对象的type与之匹配，则显示名称下拉框中相应的对象的名称，不匹配的就隐藏掉。

js代码如下：

$('#selectType').on('change', function(e) {
  _.each($('#selectName option'), function(v, k) {
    $(e.currentTarget).val() === $(v).attr("group") ? $(v).show() : $(v).hide();
  });
});

我们通过给名称下拉菜单的option添加了一个group从而方便实现联动。