Buenas, pedro,,
Gracias por corregirme el ejercicio y por tu tiempo.
No se en que navegador lo estás probando. A mi me funciona correctamente (probado en firefox y chrome). Para que te vuelva a dejar elegir cualquier país o ciudad tiene que hacer click en: "elegir país" o "elegir ciudad" respectivamente.
Subo el código otra vez a ver si me he equivocado yo en subirlo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){
selectPais = document.getElementById('pais');
selectCiudad = document.getElementById('ciudad');
selectPais.addEventListener('change', ciudadesCorrespondientes);
selectCiudad.addEventListener('change', paisCorrespondiente);
selectPais[0].addEventListener('click', todosLosPaises);
selectCiudad[0].addEventListener('click', todasLasCiudades);
}
function ciudadesCorrespondientes(){
if(selectPais.value=='mexico'){
for(var i=1; i<selectCiudad.length; i++){
if(selectCiudad[i].value != 'mexico df' && selectCiudad[i].value != 'guadalajara'){
selectCiudad[i].disabled = true;
}else{
selectCiudad[i].disabled = false;
}
}
}
if(selectPais.value=='espanya'){
for(var i=1; i<selectCiudad.length; i++){
if(selectCiudad[i].value != 'madrid' && selectCiudad[i].value != 'barcelona'){
selectCiudad[i].disabled = true;
}else{
selectCiudad[i].disabled = false;
}
}
}
if(selectPais.value=='peru'){
for(var i=1; i<selectCiudad.length; i++){
if(selectCiudad[i].value != 'lima' && selectCiudad[i].value != 'trujillo'){
selectCiudad[i].disabled = true;
}else{
selectCiudad[i].disabled = false;
}
}
}
if(selectPais.value=='colombia'){
for(var i=1; i<selectCiudad.length; i++){
if(selectCiudad[i].value != 'bogota' && selectCiudad[i].value != 'cali'){
selectCiudad[i].disabled = true;
}else{
selectCiudad[i].disabled = false;
}
}
}
}
function paisCorrespondiente(){
if(selectCiudad.value == 'mexico df' || selectCiudad.value == 'guadalajara'){
selectPais[1].selected = true;
for(var i=1; i<selectPais.length; i++){
if(selectPais[i].value != 'mexico'){
selectPais[i].disabled = true;
}else{
selectPais[i].disabled = false;
}
}
}
if(selectCiudad.value == 'madrid' || selectCiudad.value == 'barcelona'){
selectPais[2].selected = true;
for(var i=1; i<selectPais.length; i++){
if(selectPais[i].value != 'espanya'){
selectPais[i].disabled = true;
}else{
selectPais[i].disabled = false;
}
}
}
if(selectCiudad.value == 'lima' || selectCiudad.value == 'trujillo'){
selectPais[3].selected = true;
for(var i=1; i<selectPais.length; i++){
if(selectPais[i].value != 'peru'){
selectPais[i].disabled = true;
}else{
selectPais[i].disabled = false;
}
}
}
if(selectCiudad.value == 'bogota' || selectCiudad.value == 'cali'){
selectPais[4].selected = true;
for(var i=1; i<selectPais.length; i++){
if(selectPais[i].value != 'colombia'){
selectPais[i].disabled = true;
}else{
selectPais[i].disabled = false;
}
}
}
}
function todosLosPaises(){
for(var i=1; selectPais.length; i++){
selectPais[i].disabled = false;
}
}
function todasLasCiudades(){
for(var i=1; selectCiudad.length; i++){
selectCiudad[i].disabled = false;
}
}
</script>
</head>
<body>
<select name="pais" id="pais" style="margin-right: 20px;">
<option value="">Elegir país</option>
<option value="mexico">México</option>
<option value="espanya">España</option>
<option value="peru">Peru</option>
<option value="colombia">Colombia</option>
</select>
<select name="ciudad" id="ciudad">
<option value="">Ejegir ciudad</option>
<option value="mexico df">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>
</body>
</html>
Gracias.
Tema: JavaScript selectedIndex Desactivar option select disabled eventos form CU01183E (Leído 6272 veces)
RSS -
WAP2