Autor Tema: JavaScript selectedIndex Desactivar option select disabled eventos CU01183E  (Leído 134 veces)

D.Ohm

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Acá mi resolución del ejercicio propuesto
Citar
EJERCICIO

Crear el código HTML y JavaScript que cumpla con las siguientes funciones:

a) Deberá presentarse un formulario con 2 elementos select. El primer elemento select permitirá elegir país y podrá elegirse entre México, España, Perú y Colombia.

b) El segundo elemento select permitirá elegir ciudad y podrá elegirse entre México D.F., Guadalajara, Madrid, Barcelona, Lima, Trujillo, Bogotá y Cali.

c) Si el usuario selecciona ciudad sin haber elegido país, deberá mostrarse como opción elegida de país el país correspondiente a la ciudad. Por ejemplo, si el usuario selecciona Bogotá deberá aparecer como país seleccionado Colombia.

d) Si el usuario selecciona un país en primer lugar, deberán deshabilitarse todas las opciones que no correspondan a ciudades de ese país. Por ejemplo si el usuario elige España, sólo podrá elegir entre Madrid y Barcelona, debiendo estar México D.F., Guadalajara, Lima, Trujillo, Bogotá y Cali deshabilitadas. Si el usuario cambia el país, deberán cambiar las ciudades cuya elección es posible.

e) Ampliación opcional para el ejercicio: introduce medidas de seguridad adicionales para que no puedan existir incoherencias entre el país seleccionado y la ciudad. Por ejemplo, imagina que el usuario elige en primer lugar como ciudad México D.F. y luego elige como país Perú. Introduce medidas de seguridad que impidan que esto suceda.

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;}

.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }

.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}

br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}

</style>
<script type="text/javascript">

    window.onload = function(){

        formuP = formulario.pais;

        formuC = formulario.ciudad;

            for (var i=0; i<formulario.length;i++){

               if (formulario[i].name=="pais") {formulario[i].addEventListener('change', inhabCiudad);}
               else {formulario[i].addEventListener('change', selecCiudad);}

                if(formulario[i].value=="Cancelar"){formulario[i].addEventListener('click', recarga)}
            }
    }

    function inhabCiudad(){

        var esto = this;

        for(var i=0; i<formuC.options.length;i++){

            if(esto.value=='Mexico'){ formuC.options[i].disabled=false; //se coloca un disabled=false acá para que en caso de cambiar de pais se rehabiliten las otras ciudades
                if(formuC.options[i].value!='Mexicodf'&&formuC.options[i].value!='Guadalajara'){formuC.options[i].disabled=true;}
            }
            else if(esto.value=='Espania'){ formuC.options[i].disabled=false;
                if(formuC.options[i].value!='Madrid'&&formuC.options[i].value!='Barcelona'){formuC.options[i].disabled=true;}
            }
            else if(esto.value=='Peru'){ formuC.options[i].disabled=false;
                if(formuC.options[i].value!='Lima'&&formuC.options[i].value!='Trujillo'){formuC.options[i].disabled=true;}
            }
            else if(esto.value=='Colombia'){ formuC.options[i].disabled=false;
                if(formuC.options[i].value!='Bogota'&&formuC.options[i].value!='Cali'){formuC.options[i].disabled=true;}
            }
        }
    }

    function selecCiudad(){

        var esto = this;

        for(var i=0; i<formuP.options.length;i++){

            if(esto.value=='Mexicodf'||esto.value=='Guadalajara'){
                if(formuP.options[i].value=='Mexico'){formuP.options[i].selected=true; formuP.options[i].disabled=false;}
                else{formuP.options[i].disabled=true;}
            } // se pone un disabled=false para que se inhabiliten los paises no autoseleccionados
            else if(esto.value=='Madrid'||esto.value=='Barcelona'){
                if(formuP.options[i].value=='Espania'){formuP.options[i].selected=true; formuP.options[i].disabled=false;}
                else{formuP.options[i].disabled=true;}
            }
            else if(esto.value=='Lima'||esto.value=='Trujillo'){
                if(formuP.options[i].value=='Peru'){formuP.options[i].selected=true; formuP.options[i].disabled=false;}
                else{formuP.options[i].disabled=true;}
            }
            else if(esto.value=='Bogota'||esto.value=='Cali'){
                if(formuP.options[i].value=='Colombia'){formuP.options[i].selected=true; formuP.options[i].disabled=false;}
                else{formuP.options[i].disabled=true;}
            }       
        }
    }

    function recarga(){window.location.reload();}
   
</script>
</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

                <div class="estiloForm">

                               <form name ="formulario" method="get">

                               <label>País</label><select id="pais" name="pais">

                               <option value="">Elija opción</option><option value="Mexico">México</option>

                               <option value="Espania">España</option><option value="Peru">Perú</option>

                               <option value="Colombia">Colombia</option>

                               </select><br/>

                               <label>Ciudad</label><select id="ciudad" name="ciudad">

                               <option value="">Elija opción</option><option value="Mexicodf">México D.F.</option>

                               <option value="Guadalajara">Guadalajara</option><option value="Madrid">Madrid</option>

                               <option value="Barcelona">Barcelona</option><option value="Lima">Lima</option>

                               <option value="Trujillo">Trujillo</option><option value="Bogota">Bogotá</option>

                               <option value="Cali">Cali</option>

                               </select><br/>

                               <input class="botonFormulario" type="submit" value="Enviar"/>

                               <input class="botonFormulario" type="reset" value="Cancelar"/>

                </form>

                </div>
</body></html>
Gracias y saludos!!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".