{"id":678,"date":"2017-05-09T15:40:41","date_gmt":"2017-05-09T18:40:41","guid":{"rendered":"http:\/\/gianfratti.com\/?p=678"},"modified":"2017-05-09T16:49:20","modified_gmt":"2017-05-09T19:49:20","slug":"combobox-dinamico-com-json-e-jquery-sem-requisicao-ajax","status":"publish","type":"post","link":"http:\/\/gianfratti.com\/index.php\/combobox-dinamico-com-json-e-jquery-sem-requisicao-ajax\/","title":{"rendered":"Combobox din\u00e2mico com JSON e jQuery sem requisi\u00e7\u00e3o AJAX"},"content":{"rendered":"

Combobox, DropDownList, Select<\/strong>, enfim, como queira chamar. Preparei um artigo mostrando como carregar os options de um select dinamicamente utilizando apenas JSON, sem chamadas Ajax.<\/p>\n

Utilizei apenas HTML e jQuery para mostrar o carregamento do DropDownList din\u00e2mico de categorias e subcategorias baseado em dois arrays. O mesmo se aplicaria, obviamente, para carregar Estado e Cidade dinamicamente.<\/p>\n

\"\"<\/p>\n

A grande vantagem aqui \u00e9 a velocidade em carregar o segundo combo, carregar sem Ajax e n\u00e3o depender de uma linguagem de programa\u00e7\u00e3o backend (C#, PHP…)<\/p>\n

Fundamentalmente \u00e9 apenas mais uma alternativa para casos espec\u00edficos.<\/p>\n

Copie o c\u00f3digo abaixo e salve em um arquivo (.html) e execute no navegador de sua prefer\u00eancia.<\/p>\n

\r\n<!DOCTYPE html>\r\n<pre><html>\r\n<head>\r\n    <title><\/title>\r\n    <meta charset="utf-8" \/>\r\n<\/head>\r\n<body>\r\n    <select id="combo1">\r\n        <option>Selecione<\/option>\r\n    <\/select>\r\n    <select id="combo2">\r\n        <option>Selecione<\/option>\r\n    <\/select>\r\n\r\n    <script src="https:\/\/code.jquery.com\/jquery-2.2.0.min.js" type="text\/javascript"><\/script>\r\n    <script type="text\/javascript">\r\n        \/\/Array de Categoria em JSON puro\r\n        var categorias = [\r\n            { "Id": "1", "Categoria": "Linguagem de programa\u00e7\u00e3o" },\r\n            { "Id": "2", "Categoria": "Banco de dados" }]\r\n        \/\/Array de Subcategoria em JSON puro\r\n        var subCategorias = [\r\n            { Id: 1, IdCategoria: 1, Nome: "C#" },\r\n            { Id: 2, IdCategoria: 1, Nome: "Java" },\r\n            { Id: 3, IdCategoria: 2, Nome: "SQL Server" },\r\n            { Id: 4, IdCategoria: 2, Nome: "My Sql" }]\r\n\r\n        $(document).ready(function () {\r\n            \/\/Percorre o array de categorias para popular o combo de categorias\r\n            $.each(categorias, function (i, categoria) {\r\n                \/\/Faz o append (adiciona) cada um dos itens do array como options do select de id combo1\r\n                $("#combo1").append($('<option>', {\r\n                    \/\/neste caso o value do option vai ser a pripriedade Id (\u00e9 case sensitive, ent\u00e3o cuide da nomenclatura)\r\n                    value: categoria.Id,\r\n                    \/\/no text estou usando a propriedade Categoria dos objetos dentro do array categoria (case sensitive tamb\u00e9m)\r\n                    text: categoria.Categoria\r\n                }))\r\n            })\r\n            \/\/Vai ser acionado cada vez que o combo1 tracar de item selecionado\r\n            $("#combo1").change(function () {\r\n                \/\/Pegando o novo valor selecionado no combo\r\n                var categoria = $(this).val()\r\n                carregaCombo2(categoria);\r\n            })\r\n\r\n            \/\/Definir o item selecionado no carregamento da p\u00e1gina\r\n            $("#combo1").val(2)\r\n            \/\/carregar o combo2 baseado na categoria selecionada\r\n            carregaCombo2(2)\r\n            \/\/Selecionar a subcategoria passando o id dela\r\n            $("#combo2").val(3)\r\n        })\r\n\r\n        function carregaCombo2(categoria) {\r\n            \/\/Fazer um filtro dentro do array de categorias com base no Id da Categoria selecionada no combo1\r\n            var subCategoriasFiltradas = $.grep(subCategorias, function (e) { return e.IdCategoria == categoria; });\r\n            \/\/Faz o append (adiciona) cada um dos itens do array filtrado no combo2\r\n            $("#combo2").html('<option>Selecione<\/option>');\r\n            $.each(subCategoriasFiltradas, function (i, subcategoria) {\r\n                $("#combo2").append($('<option>', {\r\n                    value: subcategoria.Id, \/\/Id do objeto subcategoria\r\n                    text: subcategoria.Nome \/\/Nome da Subcategoria\r\n                }))\r\n            })\r\n        }\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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. …<\/span> Read More →<\/span><\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8,12],"tags":[115,74],"class_list":["post-678","post","type-post","status-publish","format-standard","hentry","category-front-end","category-jquery","tag-combo","tag-jquery"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/comments?post=678"}],"version-history":[{"count":5,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/678\/revisions"}],"predecessor-version":[{"id":700,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/678\/revisions\/700"}],"wp:attachment":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/media?parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/categories?post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/tags?post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}