Select com Jquery

leonardo WD · Agosto 13, 2012

Galera to fazendo um site no qual na página onde tem os planos o Jquery tem que exibir as informações de pagamento de acordo com o ciclo escolhido no select, por exemplo:

Se o cliente escolher: Pagamento mensal vai exibir nas três colunas a div de pagamento mensal e assim sucessivamente.

O problema é que o select funciona apenas na primeira coluna, porém na segunda e na terceira ele bloqueia a ação e o jquery não roda.

O código HTML é esse:

<!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>Hospedagem de Sites</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<link rel="stylesheet" type="text/css" href="css/slide.css" />
<link rel="stylesheet" type="text/css" href="css/planos.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".divs").hide();
$("#p1").show();

});
</script>

</head>

<body>

  <div class="conteudo">

  <div class="planos" id="plgr">

        <div class="planosin">

        <div class="coluna">

        <div class="colfrm">
         <form action="" method="POST">
         <select class="select" title="Select one" onchange="$('.divs').hide(); $('#'+this.value).show();">
         <option value="p1" selected="selected">Pagamento mensal</option>
         <option value="p2">Pagamento trimestral</option>
         <option value="p3">Pagamento semestral</option>
         <option value="p4">Pagamento anual</option>
         </select>
         </form>
        </div><!-- Select -->
        <div class="colunatxt">

        <h1>Desconto para planos:</h1>

        <p>Trimestrais, Semestrais, Anuais!</p>

        </div> <!-- Texto -->

        <div class="colunacarc">

        <div class="colunacarctxt">Espaço em disco</div>
        <div class="colunacarctxtt">Transferência mensal</div>
        <div class="colunacarctxtt">Painel de controle</div>
        <div class="colunacarctxtt">Banco de dados</div>
        <div class="colunacarctxtt">Contas de email</div>

        </div><!-- Caracteristicas principais -->

        </div><!-- Coluna 1 -->

        <div class="plano">

        <div class="planm">Hospedagem Linux Iniciante</div><!-- Titulo -->

        <div class="planpgt">

        <div id="p1" class="planpgtprice divs">
        <h1>Pagamento Mensal</h1>
        <p>R$ <span>10,00</span></p>
        </div> <!-- Preço -->

        <div id="p2" class="planpgtprice2 divs">
        <h1>Pagamento Trimestral</h1>
        <p>R$ <span>25,50</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p3" class="planpgtprice2 divs">
        <h1>Pagamento Semestral</h1>
        <p>R$ <span>48,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,00</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p4" class="planpgtprice2 divs">
        <h1>Pagamento Anual</h1>
        <p>R$ <span>78,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>6,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div class="planpgtbtini">Fazer Assinatura</div>

        </div><!-- Pagamento -->

        <div class="plancarc">50 GB de espaço em disco</div>
        <div class="plancarc">Transferência ilimitada</div>
        <div class="plancarc">cPanel em Português</div>
        <div class="plancarc">Ilimitados</div>
        <div class="plancarc">Ilimitadas</div>

        <div class="planpgtexbini">Exibir detalhes</div>

        </div><!-- Plano Iniciante -->

        <div class="plano2">

        <div class="planm">Hospedagem Linux Intermediária</div><!-- Titulo -->

        <div class="planpgt">

        <div id="p1" class="planpgtprice divs">
        <h1>Pagamento Mensal</h1>
        <p>R$ <span>10,00</span></p>
        </div> <!-- Preço -->

        <div id="p2" class="planpgtprice2 divs">
        <h1>Pagamento Trimestral</h1>
        <p>R$ <span>25,50</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p3" class="planpgtprice2 divs">
        <h1>Pagamento Semestral</h1>
        <p>R$ <span>48,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,00</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p4" class="planpgtprice2 divs">
        <h1>Pagamento Anual</h1>
        <p>R$ <span>78,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>6,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div class="planpgtbtint">Fazer Assinatura</div>

        </div><!-- Pagamento -->

        <div class="plancarc">100 GB de espaço em disco</div>
        <div class="plancarc">Transferência ilimitada</div>
        <div class="plancarc">cPanel em Português</div>
        <div class="plancarc">Ilimitados</div>
        <div class="plancarc">Ilimitadas</div>

        <div class="planpgtexbint">Exibir detalhes</div>

        </div><!-- Plano Intermediário -->

        <div class="plano3">

        <div class="planm">Hospedagem Linux Avançada</div><!-- Titulo -->

        <div class="planpgt">

        <div id="p1" class="planpgtprice divs">
        <h1>Pagamento Mensal</h1>
        <p>R$ <span>10,00</span></p>
        </div> <!-- Preço -->

        <div id="p2" class="planpgtprice2 divs">
        <h1>Pagamento Trimestral</h1>
        <p>R$ <span>25,50</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p3" class="planpgtprice2 divs">
        <h1>Pagamento Semestral</h1>
        <p>R$ <span>48,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,00</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p4" class="planpgtprice2 divs">
        <h1>Pagamento Anual</h1>
        <p>R$ <span>78,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>6,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div class="planpgtbtavd">Fazer Assinatura</div>

        </div><!-- Pagamento -->

        <div class="plancarc">Espaço em disco ilimitado</div>
        <div class="plancarc">Transferência ilimitada</div>
        <div class="plancarc">cPanel em Português</div>
        <div class="plancarc">Ilimitados</div>
        <div class="plancarc">Ilimitadas</div>

        <div class="planpgtexbavd">Exibir detalhes</div>

        </div><!-- Plano Avançado -->

        </div> <!-- Configuração das Colunas-->       

    </div><!-- Configuração Planos -->

  </div><!-- Planos -->

  </div><!-- Conteudo -->

</body>
</html>

E o código Jquery é esse:

<script type="text/javascript">
$(document).ready(function() {

$(".divs").hide();
$("#p1").show();

});
</script>

Sérgio Haubman · Agosto 13, 2012

Leonardo,

você esta duplicando os IDs, eles tem que ser únicos, por esse motivo o jquery pega somente a primeira ocorrência.

Também será necessário modificar seu jquery utilizando classes ou pseudo seletores.

Espero ter ajudado.

Abs

Sérgio

Galera to fazendo um site no qual na página onde tem os planos o Jquery tem que exibir as informações de pagamento de acordo com o ciclo escolhido no select, por exemplo:

Se o cliente escolher: Pagamento mensal vai exibir nas três colunas a div de pagamento mensal e assim sucessivamente.

O problema é que o select funciona apenas na primeira coluna, porém na segunda e na terceira ele bloqueia a ação e o jquery não roda.

O código HTML é esse:

<!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>Hospedagem de Sites</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<link rel="stylesheet" type="text/css" href="css/slide.css" />
<link rel="stylesheet" type="text/css" href="css/planos.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".divs").hide();
$("#p1").show();

});
</script>

</head>

<body>

  <div class="conteudo">

  <div class="planos" id="plgr">

        <div class="planosin">

        <div class="coluna">

        <div class="colfrm">
         <form action="" method="POST">
         <select class="select" title="Select one" onchange="$('.divs').hide(); $('#'+this.value).show();">
         <option value="p1" selected="selected">Pagamento mensal</option>
         <option value="p2">Pagamento trimestral</option>
         <option value="p3">Pagamento semestral</option>
         <option value="p4">Pagamento anual</option>
         </select>
         </form>
        </div><!-- Select -->
        <div class="colunatxt">

        <h1>Desconto para planos:</h1>

        <p>Trimestrais, Semestrais, Anuais!</p>

        </div> <!-- Texto -->

        <div class="colunacarc">

        <div class="colunacarctxt">Espaço em disco</div>
        <div class="colunacarctxtt">Transferência mensal</div>
        <div class="colunacarctxtt">Painel de controle</div>
        <div class="colunacarctxtt">Banco de dados</div>
        <div class="colunacarctxtt">Contas de email</div>

        </div><!-- Caracteristicas principais -->

        </div><!-- Coluna 1 -->

        <div class="plano">

        <div class="planm">Hospedagem Linux Iniciante</div><!-- Titulo -->

        <div class="planpgt">

        <div id="p1" class="planpgtprice divs">
        <h1>Pagamento Mensal</h1>
        <p>R$ <span>10,00</span></p>
        </div> <!-- Preço -->

        <div id="p2" class="planpgtprice2 divs">
        <h1>Pagamento Trimestral</h1>
        <p>R$ <span>25,50</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p3" class="planpgtprice2 divs">
        <h1>Pagamento Semestral</h1>
        <p>R$ <span>48,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,00</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p4" class="planpgtprice2 divs">
        <h1>Pagamento Anual</h1>
        <p>R$ <span>78,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>6,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div class="planpgtbtini">Fazer Assinatura</div>

        </div><!-- Pagamento -->

        <div class="plancarc">50 GB de espaço em disco</div>
        <div class="plancarc">Transferência ilimitada</div>
        <div class="plancarc">cPanel em Português</div>
        <div class="plancarc">Ilimitados</div>
        <div class="plancarc">Ilimitadas</div>

        <div class="planpgtexbini">Exibir detalhes</div>

        </div><!-- Plano Iniciante -->

        <div class="plano2">

        <div class="planm">Hospedagem Linux Intermediária</div><!-- Titulo -->

        <div class="planpgt">

        <div id="p1" class="planpgtprice divs">
        <h1>Pagamento Mensal</h1>
        <p>R$ <span>10,00</span></p>
        </div> <!-- Preço -->

        <div id="p2" class="planpgtprice2 divs">
        <h1>Pagamento Trimestral</h1>
        <p>R$ <span>25,50</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p3" class="planpgtprice2 divs">
        <h1>Pagamento Semestral</h1>
        <p>R$ <span>48,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,00</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p4" class="planpgtprice2 divs">
        <h1>Pagamento Anual</h1>
        <p>R$ <span>78,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>6,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div class="planpgtbtint">Fazer Assinatura</div>

        </div><!-- Pagamento -->

        <div class="plancarc">100 GB de espaço em disco</div>
        <div class="plancarc">Transferência ilimitada</div>
        <div class="plancarc">cPanel em Português</div>
        <div class="plancarc">Ilimitados</div>
        <div class="plancarc">Ilimitadas</div>

        <div class="planpgtexbint">Exibir detalhes</div>

        </div><!-- Plano Intermediário -->

        <div class="plano3">

        <div class="planm">Hospedagem Linux Avançada</div><!-- Titulo -->

        <div class="planpgt">

        <div id="p1" class="planpgtprice divs">
        <h1>Pagamento Mensal</h1>
        <p>R$ <span>10,00</span></p>
        </div> <!-- Preço -->

        <div id="p2" class="planpgtprice2 divs">
        <h1>Pagamento Trimestral</h1>
        <p>R$ <span>25,50</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p3" class="planpgtprice2 divs">
        <h1>Pagamento Semestral</h1>
        <p>R$ <span>48,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>8,00</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div id="p4" class="planpgtprice2 divs">
        <h1>Pagamento Anual</h1>
        <p>R$ <span>78,00</span></p>
        <h2>o mesmo que</h2>
        <p>R$ <span>6,50</span> <b>(mensal)</b></p>
        </div><!-- Preço -->

        <div class="planpgtbtavd">Fazer Assinatura</div>

        </div><!-- Pagamento -->

        <div class="plancarc">Espaço em disco ilimitado</div>
        <div class="plancarc">Transferência ilimitada</div>
        <div class="plancarc">cPanel em Português</div>
        <div class="plancarc">Ilimitados</div>
        <div class="plancarc">Ilimitadas</div>

        <div class="planpgtexbavd">Exibir detalhes</div>

        </div><!-- Plano Avançado -->

        </div> <!-- Configuração das Colunas-->       

    </div><!-- Configuração Planos -->

  </div><!-- Planos -->

  </div><!-- Conteudo -->

</body>
</html>

E o código Jquery é esse:

<script type="text/javascript">
$(document).ready(function() {

$(".divs").hide();
$("#p1").show();

});
</script>

leonardo WD · Agosto 14, 2012

Obrigado Sérgio Haubman

Você tem algum site para me indicar de tutorias Jquery?

Entrar

Arquivado

Select com Jquery

Recommended Posts

leonardo WD 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sérgio Haubman 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

leonardo WD 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante