jQuery – Preencher Dropdown com Json

Uma das atividades mais triviais durante o desenvolvimento de aplicações web é preencher um dropdown ou combo com dados. Aqui vou demostrar um código bem simples para fazer isso.

Supondo que você já tenha implementado o seu método de recuperação de dados e que este esteja retornando um Json válido, podemos implementar uma função que pode ser chamada logo após os dados estarem disponíveis.

Por exemplo, podemos preencher um drodown de cidades. O HTML mínimo seria:

<select id="city"></select>


 

A função para preencher este dropdown poderia ser algo como:

function fillCity(data) 
{
     var dropdown = $('#city');
     dropdown.empty();

     dropdown.append('<option selected="true">Selecione uma cidade</option>');
     dropdown.prop('selectedIndex', 0);

     $.each(data, function (key, entry) 
     {
          dropdown.append($('<option></option>')
               .attr('value', entry.Id)
               .text(entry.CityName));
     })
}

 

Observe que a função espera receber como entrada os dados em formato Json. Em seguida colocamos o elemento HTML em uma variável facilitando assim o trabalho. Na sequencia eliminamos todos os itens e iteramos os dados onde adicionamos cada elemento ao dropdown.

Isso é o mais simples que posso pensar para preencher o dropdown com dados Json.