使用 jQuery 和 Backbone 对选择框中的数据进行分组答案

【问题标题】：Grouping data in a select box using jQuery and Backbone使用 jQuery 和 Backbone 对选择框中的数据进行分组
【发布时间】：2014-03-07 14:37:10
【问题描述】：

我有一个填充下拉菜单的 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>

我正在使用 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”标签来在手动进行标记时添加标题，但我不知道如何动态地执行它并让它可选。任何建议将不胜感激。

【问题讨论】：

标签： jquery html json backbone.js marionette

【解决方案1】：

您可以利用 Underscore 的 groupBy 方法按属性对对象进行分组。 jsfiddle 中的函数获取一些 JSON，对其进行分组，并生成 <select> 下拉列表所需的 HTML。我不确定这是否正是您正在寻找的，但希望 groupBy 函数可以在某些方面提供帮助。

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

【讨论】：

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