Ver/ocultar listas despegables

jestavio · #1 (**permalink**) 18/10/2012, 15:47

Estimados solicitando de su apoyo para saber si existe alguna manera de realizar lo que pretendo:

Quiero tener 4 botones del tipo Radio y que segun el que se elija debera mostrar su lista despegable, es decir que si elijo el Radio1 se visualize la lsita despegable 1, si elijo el Radio2 se visualize la lista despegable 2 y que las lsitas 1,3 y 4 se mantengan ocultas...

cualquier ayuda que me proporcione respecto al tema será muy preciada.

rodrigo791 · #2 (**permalink**) 18/10/2012, 16:10

Bien, pues te comento que esto no tiene que ver con php, lo haces con javascript, usando las características por decirlo de alguna forma del DOM ( Document Object Model ), con el cual podrás interactuar con los elementos del documento.

Es muy simple, es usar un par de condicionales, nada mas,

Código Javascript:

Ver original//primero accede a cada radio.
//Algo asi:
 
radio1 = document.getElementById('radio1');
radio2 = ...blablabla
 
if(radio1.checked == true){
lista1.style.display = 'block';
}
else{
lista1.style.display = 'none';
}

y asi con todos.

edie8 · #3 (**permalink**) 18/10/2012, 16:10

esto se hace con javascritp con jquery mas concretamente si buscas un poco por google seguro que encuentras, yo sabria explicarte con checkbox nose si te da igual?? si es asi es esta la manera:

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo 2</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#edad").click(function(){
    if($("#edad").attr("checked")){
    $("#miedad").css("display","block");
    }
    else
    {
    $("#miedad").css("display","none");
    }
    });
});
</script>
<body>
<form>
Nombre:<input type="text" name="nombre" />
<br />
<input type="checkbox" name="edad" value="1" id="edad" /> Dar mi edad.
<br />
<div id="miedad" style="display:none;">
Mi edad es:<!--<input type="text" name="edad" />--><select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
</form>
</body>
</html>

Espero que mi ejemplo de orientacion te sirva amigo un saludo.

rodrigo791 · #4 (**permalink**) 18/10/2012, 16:12

Podes hacerlo con jquery también como dice este señor, solo que no se porque tendría que estar cargando en memoria toda una librería para hacer una cosa tan simple como esa.

Pero en fin, si se puede hacer.

Triby · #5 (**permalink**) 18/10/2012, 16:12

Ahhmmm... jQuery sólo para mostrar/ocultar elementos?

edie8 · #6 (**permalink**) 18/10/2012, 16:14

No soy experto no tengo idea de como hacerlo de otra manera y quería ayudar y pense que era una opción yo es la que uso, un saludo, y gracias aprendi algo nuevo.

jestavio · #7 (**permalink**) 18/10/2012, 17:18

Gracias a todos por sus consejos voy a intentar por los caminos propuestos y cualquie resultado se los hare saber... Nuevamente muchas gracias