Dos div en el mismo sitio.

jlgarcia1977 · #1 (**permalink**) 10/01/2009, 14:09

Tengo el siguiente hmtl que segun pincho en una opcion del primer select me hace visible un div u otro.
No se como conseguir que ambos esten en el mismo sitio.
Ya que carga uno a continuacion del otro, y necesito que sea en el mismo sitio.

el html es:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">
function visualizar() {
document.getElementById("div1").style.visibility=' visible';
document.getElementById("div2").style.visibility=' hidden';
}

function visualizar2() {
document.getElementById("div1").style.visibility=' hidden';
document.getElementById("div2").style.visibility=' visible';

}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<select id="sel1">
<option onclick="visualizar2();" value="0" >0</option>
<option onclick="visualizar();" value="1" >1</option>
</select>

<div id="div1" style="visibility:hidden;">
<select>
<option id="op1" value="A" >A</option>
<option id="op2" value="B" >B</option>
</select>
</div>

<div id="div2" style="visibility:hidden;">
<select>
<option id="op1" value="C" >C</option>
<option id="op2" value="D" >D</option>
</select>
</div>

</body>
</html>

Panino5001 · #2 (**permalink**) 10/01/2009, 16:03

En lugar de visibility usá display (none para ocultar, block para mostrar)

jlgarcia1977 · #3 (**permalink**) 12/01/2009, 09:12

Lo he hecho como me ha dicho y con firefox funciona pero con iexplorer no va.
Y necesito que funcione con iexplorer que para la que me han dicho que debe funcionar la aplicación.
Gracias.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Prueba</title>
<script type="text/javascript">
function visualizar(opcion) {
if (opcion == 1) {
document.getElementById("div1").style.display='blo ck';
document.getElementById("div2").style.display='non e ';
}
else if (opcion == 2) {
document.getElementById("div2").style.display='blo ck';
document.getElementById("div1").style.display='non e ';
}
else {
document.getElementById("div2").style.display='non e';
document.getElementById("div1").style.display='non e';
}
}
</script>
</head>
<body>
<select onchange="visualizar(this.value);">
<option value="0" selected="selected">Elija una opcion...</option>
<option value="1">0</option>
<option value="2">1</option>
</select>
<div id="div1" style="display:none;">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div id="div2" style="display:none;">
<select>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</body>
</html>

jlgarcia1977 · #4 (**permalink**) 12/01/2009, 09:17

Perdona. Me habia dejado unos espacios y firefox no le afectaban y a Iexplorer si.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Prueba</title>
<script type="text/javascript">
function visualizar(opcion) {
if (opcion == 1) {
document.getElementById("div1").style.display='blo ck';
document.getElementById("div2").style.display='non e';
}
else if (opcion == 2) {
document.getElementById("div2").style.display='blo ck';
document.getElementById("div1").style.display='non e';
}
else {
document.getElementById("div2").style.display='non e';
document.getElementById("div1").style.display='non e';
}
}
</script>
</head>
<body>
<select onchange="visualizar(this.value);">
<option value="0" selected="selected">Elija una opcion...</option>
<option value="1">0</option>
<option value="2">1</option>
</select>
<div id="div1" style="display:none;">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div id="div2" style="display:none;">
<select>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</body>
</html>

Muchas gracias.