4

EDIÇÃO

Caso, no futuro, alguém precise da versão com jQuery. Aqui está o código:

//select encadeado com JSON
$('#uf').on('change', function () {
    var estado = $(this).val(), cidade = $('#municipio');
    $.getJSON('json/municipios.json', function (resultado) {
        $.each(resultado, function (estadoProp, valor) {
            cidade.find('option').remove();
            if (estadoProp === estado) {
                for (var i in valor) {
                    var cidadeVal = valor[i];
                    cidade.append($("<option></option>").attr("value", cidadeVal).text(cidadeVal));
                }
                /* Esta parte aqui é por conta do plugin Bootstrap Select que eu estou usando. Obviamente, não é necessária se você não usa o plugin */
                cidade.selectpicker('refresh');
            }
        });
    });
});

Eu tenho uma dúvida quanto ao uso do plugin Chained Select.

Eu tenho uma combo box HTML com os estados brasileiros, assim:

<select id="estado">
    <option value="">Selecione</option>
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espirito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MT">Mato Grosso</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
</select>

Gostaria de selecionar o estado e imediatamente ter os municípios desse estados relacionados em outra combo box a partir de um arquivo JSON.

O plugin é chamado da seguinte forma e está funcionando, mas não traz os dados da forma correta, como pode ser visto no JSFiddle.

$("#municipio").remoteChained({
    parents : "#estado",
    url : "https://gist.githubusercontent.com/eduardo-almeida-II/6e1caf8875949b38a68c/raw/5b1ede8cd5bc1959a8b02b21fcc02f576eb4ef4a/municipios.json"
});

O problema, penso eu, deve estar no formato como o arquivo JSON está (que pode ser visto aqui).

Qual deve ser o formato do JSON?

2
  • 1
    Já viste esta pergunta? -> pt.stackoverflow.com/a/10766/129
    – Sergio
    6/12/2015 às 8:13
  • Oh, sim! Dessa forma eu já conhecia sim! É que agora eu tô usando o DataTables para gerar um grid com CRUD completo e quando eu conseguir fazer o select encadeado com o plugin Chained Select vai ficar mais "limpo" o meu código. 6/12/2015 às 8:26

1 Resposta 1

2

Não conheço esse plugin, e olhando os docs parece-me que tens de formatar o JSON de uma certa maneira que não me agrada :) Não me agrada porque dá mais trabalho do que é preciso.

Aqui fica uma sugestão sem plugin, sem jQuery:

var estado = document.getElementById('estado');
var municipio = document.getElementById('municipio');

function buscaJSON(url, cb) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      var data = JSON.parse(request.responseText);
      cb(null, data);
    } else {
      cb('Error: ' + request.responseText);
    }
  };
  request.onerror = function() {
    cb('Unknown error');
  };
  request.send();
}

estado.addEventListener('change', processar);

function processar(e) {
  var estado = this.value;
  buscaJSON('https://gist.githubusercontent.com/eduardo-almeida-II/6e1caf8875949b38a68c/raw/5b1ede8cd5bc1959a8b02b21fcc02f576eb4ef4a/municipios.json', function(err, json) {
    var cidades = json[estado];
    municipio.innerHTML = '';
    cidades.forEach(function(cidade) {
      var opt = document.createElement('option');
      opt.value = opt.innerHTML = cidade;
      municipio.appendChild(opt);
    });
  });
}

jsFiddle http://jsfiddle.net/Sergio_fiddle/6utbmzx4/

A parte interessante é a função processar. Aí vou buscar o valor do elemento que recebeu o evento change, seleciono no JSON a chave desse estado var cidades = json[estado]; e depois percorro todos os nomes criando uma option para cada um...

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .