JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<select id="cities"></select>

JavaScript

var values = [{
  "Estado": "São Paulo",
  "OrderID": "Loja1-SP"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja2-SP"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja3-SP"
}, {
  "Estado": "Rio de Janeiro",
  "OrderID": "Loja1-RJ"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja4-SP"
}, {
  "Estado": "Mato Grosso",
  "OrderID": "Loja5-MT"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja6-SP"
}, {
  "Estado": "Minas-Gerais",
  "OrderID": "Loja1-MG"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja7-SP"
}, {
  "Estado": "Minas Gerais",
  "OrderID": "Loja2-MG"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja8-SP"
}];

/*agrupo pelo estado*/
var items = {},
  base, key;
$.each(values, function(index, val) {
  key = val.Estado;
  if (!items[key]) {
    items[key] = [];
  }
  items[key].push(val.OrderID);
});

/*monto o select*/
var $select = $('#cities');
$.each(items, function(index, val) {

  var optgroup = $('<optgroup>');
  optgroup.attr('label', index);
  
  $.each(val, function(index, val) {
      optgroup.append($('<option>', {
          text: val
      }));
  });
  
  $select.append(optgroup);
});