Fabyo 66 Denunciar post Postado Dezembro 22, 2009 Ola pessoal estou de volta com mais um pequeno exemplo para ajudar nossa comunidade. nesse exemplo voce irá aprender como popular um combobox (<select>) com ajax usando jquery de forma muito facil e pratica, ou seja iremos preencher os options de um select com dados vindos do banco de dados de forma dinamica e outro recurso muito interessante que vou mostrar tambem é como criar selects alinhados ou melhor dizendo aquele select que depende de outro para ser carregado, por exemplo escolhendo um estado o proximo combobox ira ter as cidades daquele estado escolhido. o motivo que me levou a criar esse topico, foi o numero constante de duvidas referente a esses assunto e fui pesquisar na net para saber como estamos de tutoriais nesse sentido, e percebi que apesar de ter bastante tutoriais explicando como fazer isso, a maioria esta muito confusa com codigos gigantescos, e mesmo o pessoal usando jquery nao souberam aproveitar o maximo que esse framework pode oferecer, o pessoal usa jquery mas acaba fazendo um monte de gambiarras no meio para chegar ao objetivo. vou mostrar como é simples usar o jquery e com poucas linhas fazer o que precisa ser feito. exemplo funcionando: * Internet Explore * Firefox * Google Chrome vamos ao que interessa: esse exemplo usa: http://jquery.com/ plugin selectboxes jquery.js é o framework e o plugin jquery.selectboxes.js é o manipulador de selects EXEMPLO ONLINE DOWNLOAD: combobox.zip OBS: deixei funcionando só para demostração, com os estados São Paulo e Rio de Janeiro e coloquei só umas 5 cidades de exemplo. usei php puro para gerar o retorno json, mas nada impede de usar um banco de dados no lugar, e se quiser usar esse exemplo para select de estados e cidades procure na net que existe banco de dados completos com estados e suas cidades. Apesar de eu ter usado poucas linhas e usei todos os recursos do jquery, isso nao impede do sistema ser melhorado ainda mais, como falei criei esse exemplo apenas para ajudar a comunidade e sanar as duvidas a esse respeito. agora vou explicar o que eu fiz nesse exemplo: index.js: //quem meche com jquery ja sabe para que serve, se não souber procure sobre tutoriais expecificos para jquery. $(function(){ //adiciono um <option value="BR">Brasil</option> ao <select id="paises"> $('#paises').addOption('BR', 'Brasil', false);//false significa que NAO será um option selecionado selected="selected" //aqui executo quando é selecionado um option $('#paises').change(function(){ //aqui só executo se o option for diferente do 'Selecione' if($('#paises').selectedTexts() != 'Selecione'){ //aqui removo todos <option>, necessario para evitar ficar option quando seleciona algum estado que nao tem cidade $('#estados').removeOption(/./); //aqui via ajax com metodo GET chamo a pagina acoes.php passo o parametros id e acao e recebo o resultado em json $('#estados').ajaxAddOption('acoes.php', {id: $(this).val(), acao: 'lerEstados'}, false); } }); $('#estados').change(function(){ if($('#estados').selectedTexts() != 'Selecione'){ $('#cidades').removeOption(/./); $('#cidades').ajaxAddOption('acoes.php', {id: $(this).val(), acao: 'lerCidades'}, false); } }); }); viu bem simples ne?, apesar de simples qualquer duvida voce tbm pode entrar no site do plugin selectboxes que la tem mais explicações. outro detalhe importante que voces vao perceber é que não iremos ter problemas com acentuação testem o exemplo online, qualquer duvida só postar aqui. valeu pessoal e boas festas :natal_biggrin: Compartilhar este post Link para o post Compartilhar em outros sites
hargon 64 Denunciar post Postado Dezembro 22, 2009 Muito bom Fabyo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Compartilhar este post Link para o post Compartilhar em outros sites
Deives 0 Denunciar post Postado Dezembro 22, 2009 Realmente o código ficou curto e de fácil entendimento, valeu Fabyo ! Compartilhar este post Link para o post Compartilhar em outros sites
Brayan Rastelli 2 Denunciar post Postado Janeiro 12, 2010 falae fabyo bls ? parabens ae pelo script ^^ só q seguinte.. aqui no linux nao ta atualizando os estados qndo mudo o país .. instalei os pacotes separados e tal.. (php,mysql,apache) ja no win funfa normal.. tem alguma ideia do pq ? valww Compartilhar este post Link para o post Compartilhar em outros sites
Fabyo 66 Denunciar post Postado Janeiro 12, 2010 qual navegador esta usando?, testou no firefox? Compartilhar este post Link para o post Compartilhar em outros sites
Brayan Rastelli 2 Denunciar post Postado Janeiro 12, 2010 Sim, FF, Opera e konqueror.. nenhum deu =T Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Janeiro 12, 2010 Muito bacana o script mesmo Fabyo.. percebi que apesar de ter bastante tutoriais explicando como fazer isso, a maioria esta muito confusa com codigos gigantescos, e mesmo o pessoal usando jquery nao souberam aproveitar o maximo que esse framework pode oferecer, o pessoal usa jquery mas acaba fazendo um monte de gambiarras no meio para chegar ao objetivo. Acredito que você tenha visto, mas deixo aqui o link de um que fiz, sem o uso de plugins adicionais:Se você puder analisar o script, e melhora-lo, acredito que podemos evitar o carregamento de mais um JS.. esse exemplo usa: http://jquery.com/ plugin selectboxes http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/ Compartilhar este post Link para o post Compartilhar em outros sites
Evandro Junior 0 Denunciar post Postado Janeiro 23, 2010 Cara, é extremamente útil ter em um site ou sistema web pelo menos uns dois comoboxes dinâmicos... Este tutorial simples, mas incrível vale a pena, e já estou aproveitando as dicas no sistema que estou desenvolvendo para o meu TCC, vai ser muito útil para o módulo de inventário de equipamentos. Muito obrigado. Compartilhar este post Link para o post Compartilhar em outros sites
Jefferson Saavedra 0 Denunciar post Postado Janeiro 28, 2010 Poxa amigo gostei muito, mas coloca um exemplo aí caso fosse buscar de um banco de dados. Obrigado pela atenção e desculpe o incômodo. Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Janeiro 29, 2010 Esse meu vem do banco: http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/ Compartilhar este post Link para o post Compartilhar em outros sites
Amanda_Flor 0 Denunciar post Postado Novembro 29, 2010 Montei e deu tudo certo, mas se eu implemento isso em um formulário, quando faço o envio dos dados recebo os números ao invés do conteúdo selecionado. Por exemplo, recebo o e-mail com esse conteúdo: País: Brasil Estado: 1 Cidade: 3 o php pra enviar está assim: $pais = $_POST['pais']; $estado = $_POST['estado']; $cidade = $_POST['cidade']; .... Compartilhar este post Link para o post Compartilhar em outros sites
Fabyo 66 Denunciar post Postado Novembro 29, 2010 é que no exemplo usei numeros basta mudar para o UF corretos abre o acoes.php e veja como estao os arrays $cidades só mudar Compartilhar este post Link para o post Compartilhar em outros sites
Amanda_Flor 0 Denunciar post Postado Novembro 29, 2010 Justamente isso que olhei Fabyo if($acao == 'lerEstados'){ if($id == 'BR'){ $estados = array( 'AC' => 'Acre', 'AL' => 'Alagoas', 'AP' => utf8_encode('Amapá'), 'AM' => 'Amazonas', 'BA' => 'Bahia', 'CE' => utf8_encode('Ceará'), 'DF' => 'Distrito Federal', 'ES' => utf8_encode('Espírito Santo'), 'GO' => utf8_encode('Goiás'), 'MA' => utf8_encode('Maranhão'), 'MT' => 'Mato Grosso', 'MS' => 'Mato Grosso do Sul', 'MG' => 'Minas Gerais', 'PA' => utf8_encode('Pará'), 'PB' => utf8_encode('Paraíba'), 'PR' => utf8_encode('Paraná'), 'PE' => 'Pernambuco', 'PI' => utf8_encode('Piauí'), 'RJ' => utf8_encode('Rio de Janeiro'), 'RN' => 'Rio Grande do Norte', 'RS' => 'Rio Grande do Sul', 'RO' => utf8_encode('Rondônia'), 'RR' => 'Roraima', 'SC' => 'Santa Catarina', 'SP' => utf8_encode('São Paulo'), 'SE' => 'Sergipe', 'TO' => 'Tocantins' ); die(json_encode($estados)); } } if($acao == 'lerCidades'){ $cidades = array(); if($id == 'RJ'){ $cidades = array( '1' => 'Angra dos Reis', '2' => utf8_encode('Aperibé'), '3' => 'Araruama', '4' => 'Areal', '5' => utf8_encode('Armação dos Búzios') ); } if($id == 'SP'){ $cidades = array( '1' => 'Adamantina', '2' => 'Adolfo', '3' => utf8_encode('Aguaí'), '4' => utf8_encode('Águas da Prata') ); } die(json_encode($cidades)); } Não posso mudar a var do if, se não não funfa rs Por exemplo: if($id == 'RJ'){ $cidades = array( 'Rio de Janeiro' => 'Angra dos Reis', 'Niterói' => utf8_encode('Aperibé') ); } Compartilhar este post Link para o post Compartilhar em outros sites
rumao 1 Denunciar post Postado Agosto 29, 2013 Boa tarde a todos, sei que este post é muito antigo mas alguém teria um exemplo como este com dados vindo do banco? Compartilhar este post Link para o post Compartilhar em outros sites
Henrique Zanini 0 Denunciar post Postado Setembro 25, 2013 Também queria saber como faz pra fazer vir os resultados do banco :/ Esse meu vem do banco: Willian, parabéns pelos ensinamentos. Já acompanho seu site a algum tempo e sempre tem muita coisa boa. Minha dúvida em relação ao código fornecido pelo Fabyo, é na parte do array. Como fazer ele vir do banco. Tentei da seguinte forma: $arr = array(); while($r = mysql_fetch_array($sql)) { $id = $r['id']; $bairro = $r['bairro']; $arr[] = array($id => $bairro); } } e o resultado foi: [{"6":"D.E.R"},{"2":"Centro"}] Porém, no select apareceu: <option value="0">[object Object]</option> <option value="1">[object Object]</option> :/ Obrigado e parabéns mais uma vez. Compartilhar este post Link para o post Compartilhar em outros sites