Ver Mensaje Individual
  #4 (permalink)  
Antiguo 14/11/2012, 12:58
pollin14
 
Fecha de Ingreso: marzo-2010
Ubicación: df
Mensajes: 58
Antigüedad: 14 años, 9 meses
Puntos: 5
Respuesta: Lista despegable que muestra contenido

HTML es un lenguaje estatico. Para hacerlo dinamico (cambie segun las acciones del usuario) necesitas usar otro lenguaje, por ejemplo javascript o PHP. Cada uno tiene un enfoque distinto.

Como eres principiante, yo te recomiendo hacerlo con javascript. Ya que haci te evitas instalar y configurar un servidor web (apache por ejemplo). Sin embargo para usar javascript necesitas saber programar.

Aqui te dejo un ejemplo completo que utiliza javascript.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <title>Selector de sistema operativo</title>
  5.     </head>
  6.     <body>
  7.         <select id="so">
  8.             <option selected value="windows">Windows</option>
  9.             <option value="linux">Linux</option>
  10.             <option value="machintoch">Machintoch</option>
  11.         </select>
  12.        
  13.         <select id="windows">
  14.             <option>XP</option>
  15.             <option>Vista</option>
  16.             <option>7</option>
  17.         </select>
  18.        
  19.         <select id="linux">
  20.             <option>Ubuntu</option>
  21.             <option>Fedora</option>
  22.             <option>Debian</option>
  23.         </select>
  24.        
  25.         <select id="machintoch">
  26.             <option>IOS X</option>
  27.         </select>
  28.     </body>
  29.     <script type="text/javascript">
  30.        
  31.         var ocultaSelectsSecundarios = function(){
  32.             document.getElementById('windows').setAttribute('style', 'display:none');
  33.             document.getElementById('linux').setAttribute('style', 'display:none');
  34.             document.getElementById('machintoch').setAttribute('style', 'display:none');
  35.         }
  36.        
  37.         ocultaSelectsSecundarios();
  38.        
  39.         //Le asignamos el evento change (cambio de valor) a el primer select.
  40.         //La funcion se ejecutara cuando el valor  del select cambie.
  41.         document.getElementById('so').onchange = function(){
  42.            
  43.             ocultaSelectsSecundarios();
  44.            
  45.             //this es el select.
  46.             switch(this.value){
  47.                 case('windows'):
  48.                     document.getElementById('windows').setAttribute('style', 'display:block');
  49.                     break;
  50.                 case('linux'):
  51.                     document.getElementById('linux').setAttribute('style', 'display:block');
  52.                     break;
  53.                 case('machintoch'):
  54.                     document.getElementById('machintoch').setAttribute('style', 'display:block');
  55.                     break;
  56.             }
  57.         };
  58.     </script>
  59. </html>

La mejor practica es meter el codigo javascript en su prodio archivo (por ejemplo, miScript.js) y llamarlo antes de la etiqueta </html> para así estar seguros que se cargo todo el html y se ejecute de forma correcta. Pero esa es otra historia.
__________________
Dead Nation

Última edición por pollin14; 14/11/2012 a las 13:01 Razón: Falta de ortografia