Foros del Web » Creando para Internet » HTML »

Lista despegable que muestra contenido

Estas en el tema de Lista despegable que muestra contenido en el foro de HTML en Foros del Web. Buenas, quisiera saber como hacer para que al seleccionar una opcion de una lista despegable aparezca otra lista despegable al lado con "sub-opciones" de la ...
  #1 (permalink)  
Antiguo 14/11/2012, 10:20
 
Fecha de Ingreso: mayo-2012
Mensajes: 8
Antigüedad: 11 años, 10 meses
Puntos: 0
Sonrisa Lista despegable que muestra contenido

Buenas, quisiera saber como hacer para que al seleccionar una opcion de una lista despegable aparezca otra lista despegable al lado con "sub-opciones" de la primera opcion...aqui tengo un ejemplo de lista:


Código:
Sistema Operativo:<br /> 
   <select name="programa">    
       <option value="Windows" selected="selected">Windows</option>
       <option value="Machintosh">Mac</option>
       <option value="Linux">Linux</option>
   </select>

quisiera que al seleccionar windows apareciera otra lista que me diera opciones versiones de windows por ejemplo, y al cambiar a Mac apareciera de versiones de mac y asi sucesivamente...

Gracias.
  #2 (permalink)  
Antiguo 14/11/2012, 10:53
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 8 meses
Puntos: 641
Respuesta: Lista despegable que muestra contenido

selects dependintes con ajax o javascript

busca por ese lado.
  #3 (permalink)  
Antiguo 14/11/2012, 11:01
 
Fecha de Ingreso: mayo-2012
Mensajes: 8
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Lista despegable que muestra contenido

Gracias, investigare sobre eso
  #4 (permalink)  
Antiguo 14/11/2012, 12:58
 
Fecha de Ingreso: marzo-2010
Ubicación: df
Mensajes: 58
Antigüedad: 14 años
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
  #5 (permalink)  
Antiguo 14/11/2012, 14:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Respuesta: Lista despegable que muestra contenido

Cita:
Última edición por pollin14; Hoy a las 16:01 Razón: Falta de ortografia
Igual se te escaparon algunos errores de ortografía que no corregiste.

Pero es lo de menos, más grave es comparar a JS con PHP, siendo que el primero sí le sirve para manejar elementos en el documento, pero el segundo es para manejar datos en el servidor. La manera de que acceda a la página es recargando, así que PHP no le sirve.
Eso de poner el escript al final es más que discutible. En algún caso será práctico, pero la idea es que se cargue primero, por eso va en el <head>.

Lo que me sigue preocupando es eso de setear (y remover) atributos con JS. Insisto con lo que dije en otro tema (que voy a linkear abajo): puede que esté un poco paranóico, pero me parece que antes no aparecían tantos temas con esa ... ¿burrada?. En algunos contextos se justifica; pero en la mayoría, no.

Y lo empecé a ver días atrás en un ejemplo lamentable que no quise terminar de despedazar por eso del setAttribute() o removeAttribute() porque me pareció que había cosas peores.
Y desde entonces aparecen ejemplos como éste (complicado al cuete) que también pone y repone el atributo con su valor. Si tengo razón, y salío de ahí, entonces no hay que tener piedad cuando aparecen estas cosas. Mirá que yo soy partidario de señalar el moco a la primera, justamente para que no se propague, pero a veces me parece que exagero ... y quizá no sea así.

Compatibilidad de removeAttribute() en IE8. Que opinan?

(Iba a poner enlaces a varios de los mil ejemplos que hay sobre elementos de formulario dependientes, pero ni vale la pena, para eso está el buscador.)
  #6 (permalink)  
Antiguo 14/11/2012, 16:10
 
Fecha de Ingreso: marzo-2010
Ubicación: df
Mensajes: 58
Antigüedad: 14 años
Puntos: 5
Respuesta: Lista despegable que muestra contenido

¿entonces cual seria tu solucion para no usar setAttribute?
Yo en la vida real por lo general uso JQUERY con addClass. Tu que usas. Y si me puedes pasar un link (blog, w3c) para ver porque no usar setAttribute y/o removeAttribute seria bueno.
__________________
Dead Nation
  #7 (permalink)  
Antiguo 14/11/2012, 20:07
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Respuesta: Lista despegable que muestra contenido

No, no te voy a pasar nada. Y podrías empezar por leer algunos manuales.
Ya que estás, aprovechá a mirar el enlace que dejé, que para eso está.

Y no me extraña para nada que usés JQ. Seguro hasta para algo tan elemental como esto, que fue explicado -como dije- montones de veces y en distintas variantes para cada caso en particular sólo usando JS.


Edito: (sí, perdón, la historia de siempre...) Recién veo tu valoración negativa, pollin14. Y también como siempre, los "-1" que me ligo son de desubicados como vos. Lo que por un lado, me deja bastante tranquilo con mis aportes.

Vas a tener que aprender un poquito de javascript, y a no poner valoraciones negativas hasta que tengas algo de criterio para hacerlo.

Última edición por furoya; 14/11/2012 a las 20:13 Razón: Siempre miro tarde mi Panel.
  #8 (permalink)  
Antiguo 14/11/2012, 22:12
 
Fecha de Ingreso: marzo-2010
Ubicación: df
Mensajes: 58
Antigüedad: 14 años
Puntos: 5
Respuesta: Lista despegable que muestra contenido

¬¬ estas bien tonto ¿Quien diablos eres tu para decir que no se javascript...? ups espera, ¡tu lo inventaste!. Y si no quieres compartir tu conocimiento entonces vendeselo a Microsoft.
__________________
Dead Nation

Etiquetas: despegable, lista, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:31.