Combobox em jQuery

Combobox em jQuery

Cansado das limitações ou do visual simples dos Combobox (ou Dropdown list) padrões da internet? Aprenda a fazer um Combobox com jQuery, e leve a modernidade para o seu website!

Neste simples tutorial, usarei o plug-in simpledropdown, que deve ser baixado aqui:
http://projetos.lucaspeperaio.com/dropdown-jquery/js/jquery.simpledropdown.js

Usando o plug-in Simple Drop Down

Com a ajuda deste plug-in, faremos um belo efeito num combobox, que pode ser visto abaixo:
http://projetos.lucaspeperaio.com/dropdown-jquery

jquery-combobox

Clique na imagem para ver o efeito

 

 

 

 

 

 

Código utilizado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/dropdown.css" type="text/css" rel="stylesheet"/>
<!--&#91;if lte IE 7&#93;>
<link href="css/ie.css" type="text/css" rel="stylesheet"/>
<!&#91;endif&#93;-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.simpledropdown("#dropdown");
});
</script>
</head>

<body>
<div id="dropdown">
<ul>
<li>Selecione um País</li>
<li>
<ul>
<li><a href="#">Argentina</a></li>
<li><a href="#">Brasil</a></li>
<li><a href="#">Uruguai</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Observe que, não basta apenas você copiar este código, pois não funcionará de imediato. É necessário que você baixe o plug-in (link no começo do post), e o jQuery. Caso queira baixar este exemplo que eu fiz, ai está:

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site





7 Comentários Deixe o seu

  1. Edmar Carvalhaes (ProfBaco)

    Oi amigo tudo bem? Adorei o seu post mas estou com um pequeno problemas e queria uma ajuda sua. Estava dando uma olhada e tenho a situação. Eu faço uma busca dinâmica no meu banco de dados e trago o nome, email e telefone. Com isto eu tenho uma tabela com 4 colunas, sendo elas: NOME | EMAIL | TELEFONE | AÇÃO Ele vai trazendo pra mim todos os registros, o que acontece é que na coluna AÇÃO colocasse em DROP, funcionou somente para a primeira linha, das segundas linhas pra frente não me mostra o combo certinho, me mostra somente os dados dentro do DIV um abaixo do outro. Sabe como resolver isto, eu gostaria que em cada linha o COMBOBOX aparecesse certinho para cada linha. Aguardo….

    • Thiago

      Muda o nome do ID e no combo tbm!

  2. Geovani

    Tem como usar essa soluçao do Combobox em jQuery em um site feito em WordPress? tipo tenho um site que eu precioso que o meu cliente selecione uma ESPECIALIDADE ( cardiologia, neurologia…) depois ele seleciona o ESTADO (mg, ba, rj…) logo em seguida ele puxa a CIDADE ( belo horizonte, salvador…) quando ele clicar em LISTAR deve aparecer o resultado da busca que seria na verdade os medicos ou hospitais referentes. O site é feito em WordPress tem como implementar isso nele? Obrigado pela atenção.

  3. Lucas Peperaio

    Respondendo as duas perguntas:
    @Edmar:
    Você está preenchendo o combobox com a tag li?

    @Geovani:
    Tem sim, seria a mesma coisa que usar em um site comum

  4. Ricardo

    O link esta quebrado, http://archive.plugins.jquery.com/files/jquery.simpledropdown.v1.2.zip.

    Muito bom o blog, parabens!

  5. paulo

    cade o css, gostei mt do drop!

    • Evandro

      http://projetos.lucaspeperaio.com/dropdown-jquery/css/dropdown.css