« anterior próximo »
Páginas: [1]

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

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
JavaScript selectedIndex Desactivar option select disabled eventos CU01183E
« en: 05 de Febrero 2016, 23:36 »
Buenas.
Dejo otra solución más.
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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio CU01184E JavaScript</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 () {
ciudadSelect = document.getElementById('ciudad');
paisSelect = document.getElementById('pais');
ciudadSelect.addEventListener('change', deshabilitaPais);
paisSelect.addEventListener('change', deshabilitaCiudad);
paisSelect.addEventListener('click', deshabilitaCiudad);
}
function deshabilitaCiudad(){
var a = 0;
var b = 0;
if(paisSelect.selectedIndex == 1){a=1;b=2;}
if(paisSelect.selectedIndex == 2){a=3; b=4;}
if(paisSelect.selectedIndex == 3){a=5; b=6;}
if(paisSelect.selectedIndex == 4){a=7;b=8;}
if(paisSelect.selectedIndex == 0){
for(var i=1; i<ciudadSelect.length; i++){ciudadSelect[i].disabled = false;}
}else{
for(var i=1; i<ciudadSelect.length; i++){
if(i==a || i==b){
ciudadSelect[i].disabled = false;
}else{
ciudadSelect[i].disabled = true;
}
}
}
}
function deshabilitaPais(){
var a = 0;
if(ciudadSelect.selectedIndex == 1 || ciudadSelect.selectedIndex == 2){a=1; paisSelect.value = 'mexico';}
if(ciudadSelect.selectedIndex == 3 || ciudadSelect.selectedIndex == 4){a=2; paisSelect.value = 'espanna';}
if(ciudadSelect.selectedIndex == 5 || ciudadSelect.selectedIndex == 6){a=3; paisSelect.value = 'peru';}
if(ciudadSelect.selectedIndex == 7 || ciudadSelect.selectedIndex == 8){a=4; paisSelect.value = 'colombia';}
if(ciudadSelect.selectedIndex == 0){
for(var i=1; i<paisSelect.length; i++){paisSelect[i].disabled = false;}
}else{
for(var i=1; i<paisSelect.length; i++){
if(i==a){
paisSelect[i].disabled = false;
}else{
paisSelect[i].disabled = true;
}
}
}
}
</script>
</head>
<body>
<h2>Cursos aprenderaprogramar.com</h2><h3>Ejercicio CU01184E JavaScript</h3>
<div class="estiloForm">
<form name ="formularioProcedencia" method="get" action="http://aprenderaprogramar.com">
<p>Elija país y ciudad</p>
<label>País:</label>
<select id="pais" name="pais">
<option value="">Elija opción</option>
<option value="mexico">México</option>
<option value="espanna">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>
Saludos.
« Última modificación: 08 de Febrero 2016, 09:35 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:JavaScript selectedIndex Desactivar option select disabled eventos CU01183E
« Respuesta #1 en: 08 de Febrero 2016, 09:35 »
Buenas Pedro el ejercicio cumple con todo lo que se pedía

Habría cosas que se podrían mejorar para que el comportamiento fuera más coherente, por ejemplo:

- Si selecciono en primer lugar como ciudad Barcelona, me aparece automáticamente como país España. Hasta ahí todo correcto. Ahora da opción a elegir entre cualquier ciudad. Ahí realmente al estar elegido España como país, deberían deshabilitarse todas las ciudades que no fueran de España.

- Otra situación: Si selecciono en primer lugar como ciudad Barcelona, me aparece automáticamente como país España. Hasta ahí todo correcto. Ahora voy a intentar elegir país y está todo deshabilitado excepto "Elija opción" y "España". Si selecciono "elija opción", se debería borrar la ciudad elegida y quedar como elija opción también para ciudad, pero sin embargo se mantiene como ciudad elegida Barcelona. Además una vez seleccionado "Elija opción" siguen estando deshabilitados el resto de países, con lo cual no puedo elegir ahora Colombia por ejemplo.

Salu2
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript selectedIndex Desactivar option select disabled eventos CU01183E
« Respuesta #2 en: 09 de Febrero 2016, 00:01 »
Hola Ogramar.

Aquí dejo la corrección, además añadí una función más para dejar visibles todos los elementos de los dos select, después de elegir "Elija opción" en cualquiera de los dos select.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio CU01184E JavaScript</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 () {
ciudadSelect = document.getElementById('ciudad');
paisSelect = document.getElementById('pais');
ciudadSelect.addEventListener('change', deshabilitaPais);
paisSelect.addEventListener('change', deshabilitaCiudad);
}
function reinicioSelect(){
for(var i=1; i<ciudadSelect.length; i++){ciudadSelect[i].disabled = false;}
for(var i=1; i<paisSelect.length; i++){paisSelect[i].disabled = false;}
}
function deshabilitaCiudad(){
var a = 0;
var b = 0;
if(paisSelect.selectedIndex == 1){a=1;b=2;}
if(paisSelect.selectedIndex == 2){a=3; b=4;}
if(paisSelect.selectedIndex == 3){a=5; b=6;}
if(paisSelect.selectedIndex == 4){a=7;b=8;}
if(paisSelect.selectedIndex == 0){
ciudadSelect.selectedIndex = 0;
reinicioSelect();
}else{
for(var i=1; i<ciudadSelect.length; i++){
if(i==a || i==b){
ciudadSelect[i].disabled = false;
}else{
ciudadSelect[i].disabled = true;
}
}
}
}
function deshabilitaPais(){
var a = 0;
if(ciudadSelect.selectedIndex == 1 || ciudadSelect.selectedIndex == 2){a=1; paisSelect.value = 'mexico';}
if(ciudadSelect.selectedIndex == 3 || ciudadSelect.selectedIndex == 4){a=2; paisSelect.value = 'espanna';}
if(ciudadSelect.selectedIndex == 5 || ciudadSelect.selectedIndex == 6){a=3; paisSelect.value = 'peru';}
if(ciudadSelect.selectedIndex == 7 || ciudadSelect.selectedIndex == 8){a=4; paisSelect.value = 'colombia';}
if(ciudadSelect.selectedIndex == 0){
paisSelect.selectedIndex = 0;
reinicioSelect();
}else{
for(var i=1; i<paisSelect.length; i++){
if(i==a){
paisSelect[i].disabled = false;
}else{
paisSelect[i].disabled = true;
}
}
}
deshabilitaCiudad();
}
</script>
</head>
<body>
<h2>Cursos aprenderaprogramar.com</h2><h3>Ejercicio CU01184E JavaScript</h3>
<div class="estiloForm">
<form name ="formularioProcedencia" method="get" action="http://aprenderaprogramar.com">
<p>Elija país y ciudad</p>
<label>País:</label>
<select id="pais" name="pais">
<option value="">Elija opción</option>
<option value="mexico">México</option>
<option value="espanna">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>
Saludos.
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:JavaScript selectedIndex Desactivar option select disabled eventos CU01183E
« Respuesta #3 en: 11 de Febrero 2016, 08:18 »
Ahora perfecto!
En línea
Páginas: [1]
« anterior próximo »
 

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