JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<select id="products"></select>

JavaScript

var data = [{
    "id": "210",
    "name": "Name 1",
    "category": "Category 1"
}, {
    "id": "187",
    "name": "Name 2",
    "category": "Category 1"
}, {
    "id": "186",
    "name": "Name 3",
    "category": "Category 1"
}, {
    "id": "185",
    "name": "Name 4",
    "category": "Category 1"
}, {
    "id": "184",
    "name": "Name 5",
    "category": "Category 1"
}, {
    "id": "183",
    "name": "Name 6",
    "category": "Category 1"
}, {
    "id": "182",
    "name": "Name 7",
    "category": "Category 1"
}, {
    "id": "181",
    "name": "Name 8",
    "category": "Category 2"
}, {
    "id": "180",
    "name": "Name 9",
    "category": "Category 3"
}, {
    "id": "178",
    "name": "Name 10",
    "category": "Category 2"
}];

var groupData = _.groupBy(data, function(obj) {
  return obj.category;
});

var optGroups = [];
for (var key in groupData) {
  if (groupData.hasOwnProperty(key)) {
      var optGroup = $("<optgroup></optgroup>");
      optGroup.attr("label", key);
      var currentGroup = groupData[key];
      for (var i = 0; i < currentGroup.length; i++) {
         $("<option />").attr("value", currentGroup[i].id).html(currentGroup[i].name).appendTo(optGroup);
      }
      optGroups.push(optGroup);
  }
}

for(var i = 0; i < optGroups.length; i++) {
    $("#products").append(optGroups[i]);
}