Combobox dinâmico com JSON e jQuery sem requisição AJAX


por
Cesar Cassiano Schimanco
Já avaliou este artigo?
Combobox dinâmico com JSON e jQuery sem requisição AJAX Avaliação 5/5 - 1 votos.

Combobox, DropDownList, Select, enfim, como queira chamar. Preparei um artigo mostrando como carregar os options de um select dinamicamente utilizando apenas JSON, sem chamadas Ajax.

Utilizei apenas HTML e jQuery para mostrar o carregamento do DropDownList dinâmico de categorias e subcategorias baseado em dois arrays. O mesmo se aplicaria, obviamente, para carregar Estado e Cidade dinamicamente.

A grande vantagem aqui é a velocidade em carregar o segundo combo, carregar sem Ajax e não depender de uma linguagem de programação backend (C#, PHP...)

Fundamentalmente é apenas mais uma alternativa para casos específicos.

Veja como ficou (veja aqui o exemplo funcionando):

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <select id="combo1">
        <option>Selecione</option>
    </select>
    <select id="combo2">
        <option>Selecione</option>
    </select>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Array de Categoria em JSON puro
        var categorias = [
            { "Id": "1", "Categoria": "Linguagem de programação" },
            { "Id": "2", "Categoria": "Banco de dados" }]
        //Array de Subcategoria em JSON puro
        var subCategorias = [
            { Id: 1, IdCategoria: 1, Nome: "C#" },
            { Id: 2, IdCategoria: 1, Nome: "Java" },
            { Id: 3, IdCategoria: 2, Nome: "SQL Server" },
            { Id: 4, IdCategoria: 2, Nome: "My Sql" }]

        $(document).ready(function () {
            //Percorre o array de categorias para popular o combo de categorias
            $.each(categorias, function (i, categoria) {
                //Faz o append (adiciona) cada um dos itens do array como options do select de id combo1
                $("#combo1").append($('<option>', {
                    //neste caso o value do option vai ser a pripriedade Id (é case sensitive, então cuide da nomenclatura)
                    value: categoria.Id,
                    //no text estou usando a propriedade Categoria dos objetos dentro do array categoria (case sensitive também)
                    text: categoria.Categoria
                }))
            })
            //Vai ser acionado cada vez que o combo1 tracar de item selecionado
            $("#combo1").change(function () {
                //Pegando o novo valor selecionado no combo
                var categoria = $(this).val()
                carregaCombo2(categoria);
            })

            //Definir o item selecionado no carregamento da página
            $("#combo1").val(2)
            //carregar o combo2 baseado na categoria selecionada
            carregaCombo2(2)
            //Selecionar a subcategoria passando o id dela
            $("#combo2").val(3)
        })

        function carregaCombo2(categoria) {
            //Fazer um filtro dentro do array de categorias com base no Id da Categoria selecionada no combo1
            var subCategoriasFiltradas = $.grep(subCategorias, function (e) { return e.IdCategoria == categoria; });
            //Faz o append (adiciona) cada um dos itens do array filtrado no combo2
            $("#combo2").html('<option>Selecione</option>');
            $.each(subCategoriasFiltradas, function (i, subcategoria) {
                $("#combo2").append($('<option>', {
                    value: subcategoria.Id, //Id do objeto subcategoria
                    text: subcategoria.Nome //Nome da Subcategoria
                }))
            })
        }

    </script>
</body>
</html>


Resumo:
Como carregar um Drop Down (Select no HTML) com JSON e jQuery sem AJAX. Mais rápido e sem necessidade de linguagem de programação. Tudo feito via Javascript.

Comentários

Carregando comentários

Postar um novo comentário



Processando...