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>
<br>
<label>Outro campo: <span id="outro"></span></label>

JavaScript

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

/*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);
});

/*
*ATENÇÃO NESSE MÉTODO
*/
$('#cities').change(function() {
  
  //AQUI PEGAMOS OS DADOS DA LINHA SELECIONADA
  var...