Div oculta

[Biel. 9]

  Boa tarde a todos. Direto ao ponto. Pessoal gostaria que a divA e divB de inicio quando teclamos (F12) para visualizar na tela FICASSE OCULTA e

ao selecionar o itemA exibisse a divA ou

ao selecionar o itemB exibisse a divB 

<select id="idSelect" onChange="mudarEstado();">
  <option  value="">--selecione--</option>
  <option  value="valueA" >itemA</option>
  <option  value="valueB" >itemB</option>
</select>
<br />

<div id="palco">
  <div id="divA">exibe div A</div>
  <div id="divB">exibe div B</div>
</div>

<script type="text/javascript">
function mudarEstado() {

var forIgual = document.getElementById("idSelect").value;

if (forIgual === "valueA"){
document.getElementById("divA").style.display = "block";
document.getElementById("divB").style.display = "none";
}

else if (forIgual === "valueB"){
document.getElementById("divA").style.display = "none";
document.getElementById("divB").style.display = "block";
}

}
</script>

 

[Douglas Julião 34]

<div id="palco"></div>

Acho que é isso que você quer

if (forIgual === "valueA"){
document.getElementById("palco").innerHTML = '<div class="A"></div>';
}

else if (forIgual === "valueB"){
document.getElementById("palco").innerHTML = '<div class="B"></div>';
}

[Biel. 9]

Douglas muito obrigado por complementar o código que postei. Seu complemento foi de grande ajuda. Dar forma que você fez o resultado desejado também é obtido. Veja: Gostaria mesmo é que a <div id="divA"></div> e <div id="divB"></div> 

ficasse fora código javascript e não dentro. Obrigado!

 

[Douglas Julião 34]

Desculpe, eu não entendi rsrs conseguiu resolver?

[Gleyson Abreu 49]

1 hora atrás, Biel. disse:

Douglas muito obrigado por complementar o código que postei. Seu complemento foi de grande ajuda. Dar forma que você fez o resultado desejado também é obtido. Veja: Gostaria mesmo é que a <div id="divA"></div> e <div id="divB"></div> 

ficasse fora código javascript e não dentro. Obrigado!

 

Tu pode deixar assim:

<div id="palco">
<div id="divA" style="display:none;">
</div>
<div id="divB" style="display:none;">
</div>
</div>

E com código do Douglas fazer o seguinte:

21 horas atrás, Douglas Julião disse:

<div id="palco"></div>

Acho que é isso que você quer

if (forIgual === "valueA"){
document.getElementById("palco").innerHTML = '<div class="A"></div>';
}

else if (forIgual === "valueB"){
document.getElementById("palco").innerHTML = '<div class="B"></div>';
}

Assim:

if (forIgual === "valueA"){
$('#divA').show();
$('#divB').hide(); //Caso usuário já tiver clicado para abrir a divB mais resolveu clicar na A, a B ficará oculta.
}

else if (forIgual === "valueB"){
$('#divB').show();
$('#divA').hide(); //Caso usuário já tiver clicado para abrir a divA mais resolveu clicar na B, a A ficará oculta
}