Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Uda10

Como posso conseguir fazer esse sistema?

Por , em Javascript

Recommended Posts

Uda10    0

Uda10
Postado

Tenho duas listas; 'LISTA 1' e 'LISTA 2'. Por exemplo, quando eu selecionar o 'ITEM C' a outra lista só carrega os itens; 1, 4 e 6 da lista NUM.

 

 

Quote

LISTA 1: A B C D E

 

LISTA 2: 1 2 3 4 5 6

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Qual a lógica desse sistema?

Bem... Se você quer selecionar manualmente, sem nenhuma lógica você pode utilizar JQuery, vou deixar abaixo um exemplo, aí você adapta ao seu caso.

 

<!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>Documento sem título</title>
<style>
a {margin-left:10px;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
 $('#lista1 a').click(function(){
   var conteudo = $(this).html();
if (conteudo=='A') {
  $('#lista2 a').hide();
  $('#lista2 #a1,#lista2 #a2,#lista2 #a3').show();
};
if (conteudo=='B') {
  $('#lista2 a').hide();
  $('#lista2 #a2,#lista2 #a5,#lista2 #a3').show();
};
if (conteudo=='C') {
  $('#lista2 a').hide();
  $('#lista2 #a1,#lista2 #a4,#lista2 #a6').show();
};
if (conteudo=='D') {
  $('#lista2 a').hide();
  $('#lista2 #a3,#lista2 #a4,#lista2 #a5').show();
};
if (conteudo=='E') {
  $('#lista2 a').hide();
  $('#lista2 #a4,#lista2 #a5,#lista2 #a6').show();
};
if (conteudo=='F') {
  $('#lista2 a').hide();
  $('#lista2 #a1,#lista2 #a3,#lista2 #a5').show();
};
 });
});
</script>
</head>
<body>
<div id="lista1">
Lista 1:
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
</div>
<div id="lista2">
Lista2:
<a id="a1">1</a>
<a id="a2">2</a>
<a id="a3">3</a>
<a id="a4">4</a>
<a id="a5">5</a>
<a id="a6">6</a>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito