jquery - 使用 jQuery 和 Backbone 在选择框中分组数据

Question

我有一个填充下拉菜单的 JSON 对象。这是 JSON 的示例:

{"dates":[
  {"dateDescription":"Jan 2008","month":1,"year":2008},
  {"dateDescription":"Feb 2008","month":2,"year":2008}
]}

基本上我有几十行，涵盖了几年，所以 2008 年、2009 年等有 12 行。

我正在寻找一种对它们进行分组的方法，因此 2008 年的所有日期都会出现在下拉列表中(就像现在一样)，但在它们上方会有一个 header ，上面写着 2008 年，如果用户单击 header ，它基本上会选择2008 年的所有选项。

这是我的组合框的代码:

<select class="selectpicker" id="datedropdown">
  <% _.each(dates, function(item){ %>
    <option value="<%= item %>"><%= item %></option>
  <% });%>
</select>

我正在使用 Backbone & Marionette 查询 JSON 并填充月份，但无法更改 JSON。这是用于填充当前月份的代码。

return Backbone.Model.extend({  
  url: "webapp/JSONDATA",
  loaded: false,
  defaults: function() {
    return {
      states: [],
      dates: []
    }
  },
  parse: function(data) {
    return {
      states: _.pluck(data.states, 'stateName'),
      dates: _.pluck(data.dates, 'dateDescription') //in the format Jan 2008
    }
  },

  initialize: function () {
    this.on('change', this.change);
    this.fetch();
  }

我还在使用 Bootstrap 进行下拉菜单，他们提供“optgroup”标签以在手动进行标记时添加标题，但我无法弄清楚如何动态进行并使其可选择。任何建议将不胜感激。

Answer 1

您可以利用 Underscore 的 groupBy 按属性对对象进行分组的方法。 jsfiddle中的函数获取一些 JSON，将其分组，并生成 <select> 所需的 HTML落下。我不确定这是否正是您要查找的内容，但希望 groupBy 函数可以在某种程度上提供帮助。

http://jsfiddle.net/LqrDL/3/