Uma das atividades mais triviais durante o desenvolvimento de aplica\u00e7\u00f5es web \u00e9 preencher um dropdown ou combo com dados. Aqui vou demostrar um c\u00f3digo bem simples para fazer isso.<\/p>\n
Supondo que voc\u00ea j\u00e1 tenha implementado o seu m\u00e9todo de recupera\u00e7\u00e3o de dados e que este esteja retornando um Json v\u00e1lido, podemos implementar uma fun\u00e7\u00e3o que pode ser chamada logo ap\u00f3s os dados estarem dispon\u00edveis.<\/p>\n
Por exemplo, podemos preencher um drodown de cidades. O HTML m\u00ednimo seria:<\/p>\n
<\/p>\n A fun\u00e7\u00e3o para preencher este dropdown poderia ser algo como:<\/p>\n <\/p>\n Observe que a fun\u00e7\u00e3o espera receber como entrada os dados em formato Json. Em seguida colocamos o elemento HTML em uma vari\u00e1vel facilitando assim o trabalho. Na sequencia eliminamos todos os itens e iteramos os dados onde adicionamos cada elemento ao dropdown.<\/p>\n Isso \u00e9 o mais simples que posso pensar para preencher o dropdown com dados Json.<\/p>\n","protected":false},"excerpt":{"rendered":" Uma das atividades mais triviais durante o desenvolvimento de aplica\u00e7\u00f5es web \u00e9 preencher um dropdown ou combo com dados. Aqui vou demostrar um c\u00f3digo bem simples para fazer isso. Supondo… <\/p>\n","protected":false},"author":1,"featured_media":377,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[69],"tags":[16,9,85],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-e-bivliotecas","tag-dropdown","tag-jquery","tag-json"],"_links":{"self":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":12,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":385,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/69\/revisions\/385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media\/377"}],"wp:attachment":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<select id=\"city\"><\/select>
\n<\/code><\/p>\nfunction fillCity(data) \r\n{\r\n var dropdown = $('#city');\r\n dropdown.empty();\r\n\r\n dropdown.append('<option selected=\"true\">Selecione uma cidade<\/option>');\r\n dropdown.prop('selectedIndex', 0);\r\n\r\n $.each(data, function (key, entry) \r\n {\r\n dropdown.append($('<option><\/option>')\r\n .attr('value', entry.Id)\r\n .text(entry.CityName));\r\n })\r\n}\r\n<\/pre>\n