Question

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

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

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

我正在寻找一种对它们进行分组的方法，所以2008年的所有日期都会出现在下拉列表中（就像现在一样）但是在它们之上将是一个标题说2008年，如果用户点击标题它将基本上选择所有2008年的选择。

这是我的Combobox的代码：

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

我正在使用Backbone＆amp; 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/

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

1 个答案: