JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<select id="cities"></select>
<br>
<label>O Endereço selecionado: <span id="endereco"></span></label>

JavaScript

var values = [{
  "Estado": "São Paulo",
  "OrderID": "Loja1",
  "Endereco": "Rua 1"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja2",
  "Endereco": "Rua 2"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja3",
  "Endereco": "Rua 3"
}, {
  "Estado": "Rio de Janeiro",
  "OrderID": "Loja1",
  "Endereco": "Rua 4"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja4",
  "Endereco": "Rua 5"
}, {
  "Estado": "Mato Grosso",
  "OrderID": "Loja5",
  "Endereco": "Rua 10"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja6",
  "Endereco": "Rua 10"
}, {
  "Estado": "Minas Gerais",
  "OrderID": "Loja1",
  "Endereco": "Rua 8"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja7",
  "Endereco": "Rua 6"
}, {
  "Estado": "Minas Gerais",
  "OrderID": "Loja2",
  "Endereco": "Rua 10"
}, {
  "Estado": "São Paulo",
  "OrderID": "Loja8",
  "Endereco": "Rua 10"
}];

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

/*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.loja,
      value: val.idx
    }));
  });

  $select.append(optgroup);
});

$('#cities').change(function() {
  var endereco = values[$(this).val()].Endereco;
  $('#endereco').text(endereco);
});