Ejemplo:
Nuestro numero de cuenta es: 000000000000000000000
Codigo HTML:
<div>
<div>
<SELECT NAME="pago" onChange="pagoOnChange(this)">
<OPTION VALUE="transferencia">Transferéncia</OPTION>
<OPTION VALUE="tarjeta">Pago con tarjeta</OPTION>
</SELECT>
</div>
<div id="nCuenta" style="display:none;">
Nuestro numero de cuenta es: 000000000000000000000
</div>
<div id="nTargeta" style="display:;">
<br>
Numero*
<br>
<input type='text' name='nTarjeta'size='20' maxLength='60'>
<br><br>
Titular*
<br>
<input type='text' name='titularTarjeta'size='20' maxLength='60'>
<br><br>
Numero de seguridad*
<input type='text' name='numeroSeguridad'size='3' maxLength='3'>
</div>
</div>
Codigo Javascript:
function pagoOnChange(sel) {
if (sel.value=="transferencia"){
divC = document.getElementById("nCuenta");
divC.style.display = "";
divT = document.getElementById("nTargeta");
divT.style.display = "none";
}else{
divC = document.getElementById("nCuenta");
divC.style.display="none";
divT = document.getElementById("nTargeta");
divT.style.display = "";
}
}
Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.Un saludo.
Gracias muy buen aporte :D
ResponderEliminarmuchas gracias! tu ejemplo me sirvio mucho :)
ResponderEliminarEstá excelente el ejemplo, Gracias!
ResponderEliminarMuchas Gracias de VERDAD tenia mas de 4 días tratando de hacer esto y no encontraba un buen ejemplo, gracias :)
ResponderEliminarExcelente, Gracias por el aporte :D
ResponderEliminarMuy bueno y sencillo. Muchas gracias!!!
ResponderEliminaresta muy bien tu ejemplo, me sirvio de mucho.
ResponderEliminardisculpa lo que pasa que tu codigo no esta funcionando soy nuevo en eto puedes ayudarmwe
ResponderEliminarPerdona la demora, ¿que és lo que no te funciona?. Si lo copias "tal cual" deberia funcionar, es más, encima del código tienes el ejemplo funcionando...
Eliminargracias amigo muy buen aporte, pero necesito tu ayuda, lo que pasa es que con el primer select list muestro otros select list dependiendo de la opción seleccionada del primero, de modo que con el segundo select list tenga que mostrar otro div de acuerdo a la opcion que seleccionen enel segundo select list, con tu codigo ya puedo mostrar el segundo select list pero no puedo adarptar la funcion para que con el select list que muestro, pueda mostrar otro div, agradeceria tu ayuda
ResponderEliminarNo, para hacer eso deberias crear una función para cada select ya que necesitas evaluar cada una de las opciones del nuevo select, o, en la función, primero hacer una serie de if (o switch) primero para identificar el select que estas tocando, y luego dentro dentro de cada uno de ellos otro If (o switch) para identificar el valor que estas seleccionando.
ResponderEliminarLo que si que se podria generalizar es lo que oculta uno y muestra otro creando una funcion donde le tienes que pasar por parámetro el que quieres mostrar, y el que quieres ocultar (o como es en tu caso, un array con los que quieres ocultar).
Un saludo
Gracias! el ejemplo esta muy ensillo y fácil de entender me ayudo mucho
ResponderEliminarExcelente aportacion amigo ejemplo practico, secillo y sobre todo muy funcional.
ResponderEliminarGenial!!
ResponderEliminarMuy bueno el ejemplo, pero una vez que seleccionas Pago con tarjeta, y volves a cargar la pagina, queda seleccionada la ultima opcion pero sin desplegar la misma.
ResponderEliminarPue si, así es, el javascript es muy caprichoso y le pican cosas como esta, cosas parecidas sucenden cuando juegas con "Atrás" y "Siguiente" del navegador.
EliminarPara prevenir esto que comentas habría que jugar con los eventos de la pagina y comprobar que elemento hay seleccionado o setearlo al primero, lo más común suele ser hacerlo en el onLoad del document
Muy buen el ejemplo excelente aportacion amigo!!!!!
ResponderEliminarme sirvio gracias..
ResponderEliminarExcelente, fácil, sencillo, útil y adaptable.
ResponderEliminarGracias amigo, facil y entendible.
ResponderEliminarGracias...Excelente aporte
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarGracias amigo
ResponderEliminarSimple y hermoso. Muchas Gracias!!
ResponderEliminarAmigo muchas gracias, me ayudo mucho!
ResponderEliminarCopie igual el codigo pero no me funciona....sale automaticamente el segundo DIV, y cuando cambio la seleccion recien me muestra :/
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHe reescrito el comentario...
ResponderEliminarExcelente, Muchas gracias, funciona a la perfección.
Tengo una duda: ¿Cómo sería en el caso de que haya muchas opciones en el SELECT? Pongamos por ejemplo 50 opciones.
Soy nuevo en javascript y estoy un poco perdido.
Gracias de antemano.
Hace tiempo que no me dedico al desarrollo web, y diría que hay formas mucho más practicas de hacer esto, pero si lo quieres hacer en javascript puro, creo que lo más sencillo seria que los Values de cada option fueran un identificador por ejemplo un numero.
EliminarLuego los DIV que quieras mostrar o ocultar meterolos todos dentro de otro DIV padre común para todos y ponerles un id tipo "modoPago1", "modoPago2"... donde el numero coincidiria con el Value de cada Option, entonces, al cambiar el valor del Select seria iterar por todos los hijos de ese padre en común y decirle si hijo.id == "modoPago"+sel entonces hijo.style.display == "" sino pues el "none"
Muchas gracias. justamente eso que dices: cada value con un numero. En mi caso lo llame 'Div01', etc y luego, show y hide.
EliminarMuy agradecido. :)
Como lo puedo adaptar para mostrar imagenes?
ResponderEliminarBuenas tardes.
EliminarCreo que da igual que sea texto o imágenes, ya que lo que muestras u ocultas el el div al completo, independientemente si ese div contiene texto o imagen.
Este código me funciona, espero que a ti también.
Eliminar[code]
head>
script>
$(document).ready(function() {
//Select para mostrar y ocultar divs.
$("#select").on("change",function(){
var select = "#"+$(this).val();
$("#DivPai").children("div").hide();
$("#DivPai").children(select).show();
//Seleccionando 'div0', recarga la págoina y muestra todos los divs.
if (select == "#div0") {
location.reload(true);
}
});
});
/script>
/head>
body>
select id="select" name="select">
option value="div0">Selecciona una Sección.../option>
option value="div1">Sección 1/option>
option value="div2">Sección 2/option>
option value="div3">Sección 3/option>
option value="div4">Sección 4/option>
option value="div5">Sección 5/option>
/select>
div id="DivPai">
div id="div1">
p>Contenido sección 1./p>
/div>
div id="div2">
p>Contenido sección 2./p>
/div>
div id="div3">
p>Contenido sección 3./p>
/div>
div id="div4">
p>Contenido sección 4./p>
/div>
div id="div5">
p>Contenido sección 5./p>
/div>
/div>
/body>
[/code]
**NOTA:**
A TODAS las etiquetas les falta el '<' de apertura para que me deje publicarlo.