Mostrar Mensajes
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript selectedIndex Desactivar option select disabled eventos form CU01183E
« 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.
Gracias y saludos!!
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!!
RSS