Combo dinâmico com php e JQuery

Por David CHC em 25/05/2009 - 12:19 > 58.500 Visualizações > 471 comentários

Salve Amigos do Mxmasters, David CHC, em mais uma video aula de PHP. Nessa video aula iremos aprender a fazer um combo dinâmico, alimentando o select com estados e mostrando dinamicamente com ajax, usando jquery, as cidades de acordo com estado. E de quebra vocês irei indicar um arquivo sql com mais de 5000 registros com cidades e estados.

Tenham uma boa Video aula.

David CHC trabalha como free-lance em desenvolvimentos de sites,desde o projeto completo à parte do projeto. Tem conhecimentos em Padrões Web( xhtml, css), javascript( jquery), php, mysql , (iniciando no python e ruby também), photoshop, fireworks, corel draw, enfim, um eterno aprendiz...

Siga o autor no twitter: @davidchc | Site do Autor : www.davidchc.com.br

Siga o MX Masters no twitter e receba nossas atualizações: @mxmasters

http://www.mxmasters.com.br David CHC

Q bom Bruno q minha aula pode te ajudar tbm. abrs
Bruno Aldana

E aí David, Acabo de posta uma dúvida que ja foi resolvida com uma dica que vc deu em posts anteriores de usar o firebug!!! Estava com problemas para conctar no banco de dados .
Muito obrigado novamente. um abraço!!
Mauricio_donato

Sensacional amigo! Ajudou muito (:

Parabéns pela video aula ;D
http://www.mxmasters.com.br David CHC

Vc vai fazer na mesma maneira, só que no arquivo q recebe o valor da pesquisa via ajax, e vai retornar em vez de elemento option com os valores, apenas o nome do produto. E na função do jQuery onde atribuimos esse resultado, no caso o select, vc vai indicar o campo do input,
http://www.mxmasters.com.br David CHC

Primeira coisa, verifique se está passando algum valor para outra página onde vc faz a pesquisa da subcategoria. Como fazer isso ? Utilize o firebug do Firefox. Vc consegue quer o valor q está passando, e tbm o valor que está retornando do arquivo
Rafinhaal2008

como faço pra fazer isso com developertoobox?
http://www.mxmasters.com.br David CHC

Realmente não sei, pq não utilizo o dreamweaver.
http://www.mxmasters.com.br David CHC

Ana, você tem um exemplo online para dá uma olhada ?
Carlos Henrique

Muito bom…Nota 10 pra o professor aew, ele ensina muito bem..
http://www.mxmasters.com.br David CHC

É da mesma maneira q fiz na videoaula, basta vc ter relacionado as tabelas para realizar a pesquisa, e repetir o codigo do jquery, pra resgatar o valor e atribuir depois
Ronaldo

Olá David, aqui é o Ronaldo parabens pela videoaula. Me ajudou muito, porém está acontecendo que no internet explorer o carregamento do 2º select fica muito lento, já no Firefox é perfeito. Tem algum comando pra acertar isso?
http://www.mxmasters.com.br David CHC

A primeira coisa é vc utilizar o debug do IE, pra verificar se tá ocasionando algum erro.

Utilize a versão mais nova do jQuery.

No código onde busca cidade, só pode ter a tag option, e não pode ter nenhuma outra tag html.
http://www.mxmasters.com.br David CHC

Sem ver seu um exemplo online , fica complicado de saber
http://www.mxmasters.com.br David CHC

Sem ver seu um exemplo online , fica complicado de saber
Anônimo

Bom dia,

Esta a ser muito útil, contudo eu necessito de fazer um select tendo em conta 2 valores do form.
Gostaria de saber se é possível enviar mais que um valor para o php.

Por exemplo:

(“select[name=grupo9]“).change(function(){
$.post(“teste – Copy.php”,
//envio o valor da variável grupo9
{grupo9:$(this).val()},
function(valor){
$(“select[name=grupo10]“).html(valor);

}
)

no php faço $grupo9 = $_POST['grupo9'];
Mas preciso de enviar outra variável, pois na próxima combo, é para excluir a informação que já foi seleccionada (grupo9 e grupo8).

Muito obrigada pelo teu vídeo
http://www.mxmasters.com.br David CHC

Vc apenas vai duplicar o codigo para cada select q vc vai selecionar e busca
http://www.mxmasters.com.br David CHC

Se vc tem 3 grupos definidos, provavelmente vc tem essas informações relacionadas. Exemplo:

TABELA grupos
idGrupo
nomeGrupo

TABELA atividades
idAtividade
nomeAtividade
idGrupo

Repare q pra recuperar as informação da atividades relacionada ao grupo, preciso do ID do Grupo, e assim consiga essa informação q quero.

Repare que essa lógica é mesma aplicada no tutorial, onde eu tenho o estado, q seria o grupo, e as cidades relacionado ao estado, que seriam as atividades. Sendo que cada grupo tem suas atividades especificas, como estado tem suas cidades.
Anônimo

Obrigada por tudo, mas já solucionei a minha questão, com o seguinte código:

$(“select[name=grupo10]“).change(function(){
$.post(“act14.php”,
{grupo9:$(“select[name=grupo9]“).val(), grupo10:$(“select[name=grupo10]“).val()},
function(valor){
$(“select[name=grupo14]“).html(valor);
}
)
})

Obrigada
http://www.mxmasters.com.br David CHC

Creio q vc quer fazer na parte da edição. No caso o q vc vai fazer é filtrar pelo Estado, e e marcar com o valor da cidade usando selected
http://www.mxmasters.com.br David CHC

Ricardo, vc tem o exemplo online, pra ver o q tá acontecendo
http://www.mxmasters.com.br David CHC

Veja se está retornando apenas a tag option, se forem outras tags, poderá não aparecer.