Onchange

[paulo89 0]

Viva

Como posso fazer um select com onchange para este caso:

echo "<div id='bobcontent1-title' class='handcursor'>teste1</div>";
		 echo "<div id='bobcontent2-title' class='handcursor'>teste2</div>";

		 echo "<div id='bobcontent1' class='switchgroup1'>";
		 echo "<div id='bobcontent2' class='switchgroup1'>";

Ele funciona bem clicando em cima, mas agora eu gostaria de colocar isso a funcionar num combo com onchange.

 

Obrigado

Abraços

Paulo Ferreira

[Alex Hiroshi 7]

Tem como explicar melhor?

[paulo89 0]

Claro que sim vou tentar explicar melhor e obrigado pela atenção

 

Então eu tenho um script de mostrar e esconder divs(isto funciona bem):

//Ao clicar mostra/esconde div bobcontent1
echo "<div id='bobcontent1-title' class='handcursor'>teste1</div>";		 
//Ao clicar mostra/esconde div bobcontent2
echo "<div id='bobcontent2-title' class='handcursor'>teste2</div>";		 
echo "<div id='bobcontent1' class='switchgroup1'>";		 
echo "<div id='bobcontent2' class='switchgroup1'>";

O que eu pretendia era algo assim:

<select onchange="Alguma_coisa_que_nao_sei_fazer">
<option value="bobcontent1-title">teste1</option>
<option value="bobcontent2-title">teste2</option>
</select>

O que eu pretendia era que ao alterar neste combo mostrasse a respectiva div.

 

Espero ter dado para perceber

Obrigado

Abraços

[GuttoSP 2]

<script>

function mostra(div){

alert(div);

document.getElementById(div).className = "mostra";

}

</script><style type="text/css">

<!--

.mostra { visibility:visible; }

.esconde { visibility:hidden; }

-->

</style>

<?php

echo "<div id='bobcontent1-title' class='esconde'>teste1</div>";

//Ao clicar mostra/esconde div bobcontent2

echo "<div id='bobcontent2-title' class='esconde'>teste2</div>";

echo "<div id='bobcontent1' class='switchgroup1'>";

echo "<div id='bobcontent2' class='switchgroup1'>";

?>

<form name="form1" method="post" action="escondeDiv.php">

<select name="select" onChange="mostra(this.value);">

<option value="bobcontent1-title">bobcontent1-title</option>

<option value="bobcontent2-title">bobcontent2-title</option>

</select>

</form>

[paulo89 0]

Viva,

 

Não era bem isso que eu queria ^^ isto é dificil de explicar, vou tentar novamente:

 

Eu já tenho um script que mostra/esconde divs ( switchcontent.js )

Com isso se eu colocar no html assim:

<h3 id="bobcontent1-title">Teste1</h3>
<h3 id="bobcontent2-title">Teste2</h3>
<h3 id="bobcontent3-title">Teste3</h3>

<div id="bobcontent1" class="switchgroup1">
Mostra o conteudo da da div1
</div>
<div id="bobcontent2" class="switchgroup1">
Mostra o conteudo da div 2
</div>
<div id="bobcontent3" class="switchgroup1">
Mostra o conteudo da div 3
</div>

Se eu clicar em cima dos titulos (teste1,teste2 e teste3) isto funciona perfeito, ele mostra e esconde as divs.

O que eu queria era colocar esse (teste1,teste2 e teste3) dentro de um combo a ao alterar o combo abrir a respectiva div.

 

Espero que tenha conseguido explicar melhor ^^

Abraços

Paulo Ferreira

[klaygomes 0]

Paulo89,

Você poderia exibir o código do arquivo switchcontent.js?

[paulo89 0]

Fica aqui um demo do js e do html.

 

http://paulo89.netsons.org/varios/demo.rar

 

Abraços

Paulo Ferreira

[klaygomes 0]

Paulo89,

Analisei o seu script, e pelo que notei, para que funcione da forma que você deseja ele teria que sofrer algumas (digo, várias) modificações.

 

Não seria mais fácil criar um script que atenda esta sua necessidade? O script que o guto postou é um exelente exemplo.

[paulo89 0]

Sim eu já tinha pensado nisso, o exemplo do Gutto está excelente, simples e prático mas não atende a 1 das minhas necessidades.

Repare que voce abre a div1 por exemplo e depois vai abrir a div2, a div1 continua aberta.

Como eu vou usar várias divs, era bom que ao abrir 1div as outras fechassem.

 

Obrigado pela paciencia

Abraços

Paulo Ferreira

[GuttoSP 2]

<script>

        function mostra(div){

                divs = document.getElementsByTagName('div');

                for (var g = 1; g < divs.length; g++){

                        if(document.getElementById('bobcontent' + g + '-title')){

                                document.getElementById('bobcontent' + g + '-title').className = "esconde";

                        }

        }

        document.getElementById(div).className = "mostra";

       // alert(div);

        }

</script><style type="text/css">

<!--

.mostra { visibility:visible; }

.esconde { visibility:hidden; }

-->

</style>

<?php

    echo "<div id='bobcontent1-title' class='esconde'>teste1</div>";

    //Ao clicar mostra/esconde div bobcontent2

    echo "<div id='bobcontent2-title' class='esconde'>teste2</div>";

    echo "<div id='bobcontent1' class='switchgroup1'>";

    echo "<div id='bobcontent2' class='switchgroup1'>";

?>

    <form name="form1" method="post" action="escondeDiv.php">

      <select name="select" onChange="mostra(this.value);">

        <option value="bobcontent1-title">bobcontent1-title</option>

        <option value="bobcontent2-title">bobcontent2-title</option>

      </select>

    </form>

[paulo89 0]

wow muito obrigado era isso mesmo, obrigado por tudo e por toda a paciencia http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[GuttoSP 2]

Usando a propriedade visibility como hidden, as divs ficam ocultas, mas ocupando lugar na tela, se quiser ocultar e também fazer com que elas deixem de ocupar o espaço, utilize display: none e display: block.