使用jQuery和主干对选择框中的数据进行分组

我有一个JSON对象，它填充了一个下拉菜单。这是JSON的一个示例：

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

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

我正在寻找一种对它们进行分组的方法，这样2008年的所有日期都会出现在下拉列表中（像现在一样），但在它们上面会有一个标题，上面写着“2008”，如果用户单击标题，它将基本上选择所有的2008年选项

这是我的组合框的代码：

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

---

我还在下拉列表中使用Bootstrap，它们提供了“optgroup”标记，在手动进行标记时添加标题，但我无法确定如何动态地进行标记并使其可选择。任何建议都将不胜感激。

您可以利用下划线的方法按属性对对象进行分组。其中的函数获取一些JSON，对其进行分组，并生成

下拉列表所需的HTML。我不确定这是否正是您想要的，但希望groupBy函数能在某种程度上有所帮助

---

投赞成票，但请将您的答案（相关代码以及该代码的解释）放入您的答案中；否则一旦JS Fiddle掉到你的答案上，你的答案就没用了。嗨，那太好了，我有一些类似的东西，但你的看起来写得更好，不过我想做的是让那些年份标题可以选择——所以当我用户点击“2008”时，所有3个日期都被选择。

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