Ir para conteúdo

POWERED BY:

Arquivado

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

lezão

select

Recommended Posts

Ola galera bom dia!

 

enconteri esse script q da certinho no q estou precisando mas ele roda perfeitamente do jeito q eu encontrei, mas qnd eu faço as alterações no q eu preciso ele naun roda !

 

Alguem pode me ajudar ?

 

esse é o codigo q peguei na net roda certinho !

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 
<script type="text/javascript">
function id(el) {
  return document.getElementById(el);
}
function mostra(element) {
  if (element.value) {
    id(element.value).style.display = 'block';
  }
}
function esconde_todos($element, tagName) {
  var $elements = $element.getElementsByTagName(tagName),
      i = $elements.length;
  while(i--) {
    $elements[i].style.display = 'none';
  }
}
window.addEventListener('load', function() {
  var $Masculino = id('Masculino'),
      $Feminino = id('Feminino'),
      $sexo  = id('sel-sexo');
 
  //mostrando no onload da página
  esconde_todos(id('palco'), 'div');
  mostra($sexo);
 
  //mostrando ao mudar o select
  $sexo.addEventListener('change', function() {
    esconde_todos(id('palco'), 'div');
    mostra(this);
  });
});
</script>
</head>
<body>
  <select name="sel-sexo" id="sel-sexo">
    <option value="">--</option>
    <option value="Feminino">Feminino</option>
    <option value="Masculino">Masculino</option>
  </select>
 
  <div id="palco">
    <div id="Masculino">Seu sexo é Masculino!</div>
    <div id="Feminino">Seu sexo é Feminino!</div>
  </div>
 
</body>
</html>

Esse é o codigo q eu alterei, e naun roda !

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 
<script type="text/javascript">
function id(el) {
  return document.getElementById(el);
}
function mostra(element) {
  if (element.value) {
    id(element.value).style.display = 'block';
  }
}
function esconde_todos($element, tagName) {
  var $elements = $element.getElementsByTagName(tagName),
      i = $elements.length;
  while(i--) {
    $elements[i].style.display = 'none';
  }
}
window.addEventListener('load', function() {
var $Paz = id('Paz'),
    $Fan = id('Fan'),
    $Ran = id('Ran'),
    $Fam = id('Fam'),
    $Soc = id('Soc'),
    $Mul = id('Mul'),
    $Pat = id('Pat'),
    $Ped = id('Ped'),
    $Nik = id('Nik'),
    $Oli = id('Oli'),
    $Lar = id('Lar'),
    $sexo  = id('sel-sexo');

  //mostrando no onload da página
  esconde_todos(id('palco'), 'div');
  mostra($sexo);
 
  //mostrando ao mudar o select
  $sexo.addEventListener('change', function() {
    esconde_todos(id('palco'), 'div');
    mostra(this);
  });
});
</script>
</head>
<body>
          <select name="sel-sexo" id="sel-sexo">
          <option selected="selected">Escolha um clube</option> 
          <option value="Paz">PAZ FC</option>
          <option value="Fan">FANTASTIC PAZ</option>
          <option value="Ran">RANCHÃO</option>
          <option value="Fam">FAMÍLIA UNIDA</option>
          <option value="Soc">SOCCER</option>
          <option value="Mul">MULEKS DA DIRCE</option>
          <option value="Pat">PATRIMÔNIO FC</option>
          <option value="Ped">PEDREIRA FC</option>
          <option value="Nik">NIKE 10</option>
          <option value="Oli">OLIMPUS</option>
          <option value="Lar">LARANJA MECÂNICA FC</option> 
          </select>
 
  <div id="palco">
 
<div id="Paz"><img src="../../IMAGENS/BRASAO_PAZ.PNG" alt="" width="50" height="50" /></div>
<div id="Fan"><img src="../../IMAGENS/BRASAO_FANTASTIC.PNG" alt="" width="50" height="50" /></div>
<div id="Ran"><img src="../../IMAGENS/BRASAO_RANCHAO.PNG" alt="" width="50" height="50" /></div>
<div id="Fam"><img src="../../IMAGENS/BRASAO_FAMILIA.PNG" alt="" width="50" height="50" /></div>
<div id="Soc"><img src="../../IMAGENS/BRASAO_SOCCER.PNG" alt="" width="50" height="50" /></div>
<div id="Mul"><img src="../../IMAGENS/BRASAO_MULEKS.PNG" alt="" width="50" height="50" /></div>
<div id="Pat"><img src="../../IMAGENS/BRASAO_PATRIMONIO.PNG" alt="" width="50" height="50" /></div>
<div id="Ped"><img src="../../IMAGENS/BRASAO_PEDREIRA.PNG" alt="" width="50" height="50" /></div>
<div id="Nik"><img src="../../IMAGENS/BRASAO_NIKE10.PNG" alt="" width="50" height="50" /></div>
<div id="Oli"><img src="../../IMAGENS/BRASAO_OLIMPUS.PNG" alt="" width="50" height="50" /></div>
<div id="Lar"><img src="../../IMAGENS/BRASAO_LARANJA.PNG" alt="" width="50" height="50" /></div>

    
    
  </div>
 
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, está funcionando sim.

Testei aqui e mostrou corretamente cada um dos itens.

Compartilhar este post


Link para o post
Compartilhar em outros sites

William Bruno qual vc testou ?

 

o segundo codigo ?

 

e apareceu as imagens qnts vc seleciona

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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