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

D.Ohm · « **en:** 09 de Julio 2021, 04:59 »

Hola, acá mi resolución del ejercicio propuesto CU01183E del curso básico de programación web con JavaScript de aprenderaprogramar.

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!!

Ogramar · « **Respuesta #1 en:** 14 de Enero 2022, 19:22 »

Buenas, para quien revise este ejercicio dejo algunos comentarios. El código funciona correctamente, cumple con lo que pedía la rúbrica y es compacto. Algunas posibles mejoras a tener en cuenta:

- Si elijo ciudad México D.F. me aparece como país México, lo cual es correcto. Sin embargo, si ahora cambio la ciudad a "Elija opción" y luego trato de cambiar el país, no me deja elegir el país. Esto sería preferible que sí dejara elegir el país.

- Si elijo país México, se deshabilitan las ciudades que no pertenecen a México, lo cual es correcto. Sin embargo, ya no me permite cambiar de país. Esto sería preferible que sí dejara elegir el país de nuevo.

En resumen, una vez aparece un país ya no deja cambiarlo y esto sería preferible que sí permitiera cambiarlo.

Las "medidas de seguridad" no tienen por qué ir contra la usabilidad. Es decir, es correcto que si se elige Lima el país que aparezca sea Perú y que se impidan incoherencias, pero se puede hacer de una forma más "flexible" para el usuario.

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: