Foros del Web - Ver Mensaje Individual

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.