dropdownmenu.js

// Generated by CoffeeScript 1.10.0
(function() {
  var cibo, cibo_data, groups, groups_data, on_selection_changed;

  cibo_data = [
    {
      label: 'mela',
      group: 'Frutta'
    }, {
      label: 'pera',
      group: 'Frutta'
    }, {
      label: 'banana',
      group: 'Frutta'
    }, {
      label: 'arancia',
      group: 'Frutta'
    }, {
      label: 'lattuga',
      group: 'Verdura'
    }, {
      label: 'carota',
      group: 'Verdura'
    }, {
      label: 'cavoloooo',
      group: 'Verdura'
    }, {
      label: 'manzo',
      group: 'Carne'
    }, {
      label: 'pollo',
      group: 'Carne'
    }, {
      label: 'maiale',
      group: 'Carne'
    }, {
      label: 'triglia',
      group: 'Pesce'
    }, {
      label: 'cernia',
      group: 'Pesce'
    }
  ];

  groups_data = d3.nest().key(function(d) {
    return d.group;
  }).entries(cibo_data);
    
  groups = d3.select('#example').selectAll('optgroup').data(groups_data);

  groups.enter().append('optgroup').attr("label",function(d) {
      return d.key;
    })
    .attr("id",function(d) {
      return d.key;
    });
    
    for(var i=0; i<groups_data.length; i++){
    
        cibo = d3.select("#"+groups_data[i].key).selectAll('option').data(groups_data[i].values)
        cibo.enter().append('option')
        .attr("value", function(d) {
              return d.label;
        })
        .text(function(d) {
            return d.label;
        });
    }    

  on_selection_changed = function() {
    var i, len, ref, so, so_values;
    so_values = [];
    ref = d3.select('#example').node().selectedOptions;
    for (i = 0, len = ref.length; i < len; i++) {
      so = ref[i];
      so_values.push(so.value);
    }
  };

  $('#example').multiselect({
    buttonWidth: '300px',
    maxHeight: 400,
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true,
    enableFiltering: true,
    filterPlaceholder: 'Cerca',
    includeSelectAllOption: true,
    selectAllJustVisible: false,
    selectAllText: 'Select All',
    nSelectedText: ' elementi selezionati',
    allSelectedText: 'Tutti gli elementi selezionati',
    nonSelectedText: 'List',
    onChange: on_selection_changed,
    onSelectAll: on_selection_changed,
    onDeselectAll: on_selection_changed
  });

}).call(this);