Lista despegable que muestra contenido

Linkysnake · #1 (**permalink**) 14/11/2012, 10:20

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.

memoadian · #2 (**permalink**) 14/11/2012, 10:53

selects dependintes con ajax o javascript

busca por ese lado.

Linkysnake · #3 (**permalink**) 14/11/2012, 11:01

Gracias, investigare sobre eso

pollin14 · #4 (**permalink**) 14/11/2012, 12:58

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<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Selector de sistema operativo</title>
    </head>
    <body>
        <select id="so">
            <option selected value="windows">Windows</option>
            <option value="linux">Linux</option>
            <option value="machintoch">Machintoch</option>
        </select>
        
        <select id="windows">
            <option>XP</option>
            <option>Vista</option>
            <option>7</option>
        </select>
        
        <select id="linux">
            <option>Ubuntu</option>
            <option>Fedora</option>
            <option>Debian</option>
        </select>
        
        <select id="machintoch">
            <option>IOS X</option>
        </select>
    </body>
    <script type="text/javascript">
        
        var ocultaSelectsSecundarios = function(){
            document.getElementById('windows').setAttribute('style', 'display:none');
            document.getElementById('linux').setAttribute('style', 'display:none');
            document.getElementById('machintoch').setAttribute('style', 'display:none');
        }
        
        ocultaSelectsSecundarios();
        
        //Le asignamos el evento change (cambio de valor) a el primer select.
        //La funcion se ejecutara cuando el valor  del select cambie.
        document.getElementById('so').onchange = function(){
            
            ocultaSelectsSecundarios();
            
            //this es el select.
            switch(this.value){
                case('windows'):
                    document.getElementById('windows').setAttribute('style', 'display:block');
                    break;
                case('linux'):
                    document.getElementById('linux').setAttribute('style', 'display:block');
                    break;
                case('machintoch'):
                    document.getElementById('machintoch').setAttribute('style', 'display:block');
                    break;
            }
        };
    </script>
</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.

furoya · #5 (**permalink**) 14/11/2012, 14:59

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.)

pollin14 · #6 (**permalink**) 14/11/2012, 16:10

¿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.

furoya · #7 (**permalink**) 14/11/2012, 20:07

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.

pollin14 · #8 (**permalink**) 14/11/2012, 22:12

¬¬ 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.