1

tengo un formulario, y a la hora de ir seleccionando el continente, pais, comunidad autonoma, me gustaria quitar los paises que no tengan que ver con el continente seleccionado. Es decir, que al seleccionar Europa aparezca España, Francia y Portugal, y si selecciono otro Continente como America, pues que desaparezca de la lista los paises europeos y solo salgan EEUU y Canada, por ejemplo.

Mas o menos tengo esto, pero necesito quitar los campos de :

Extension Territorial
Numero de Habitantes
Moneda enviar

pero cuando los quito da no se muestran los paises por continente

gracias

<html>
<head>
<title>Datos de paises de centro america</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, itial-scale=1.0 maximun-scale1.0, minimun-scale=1.0"/>
<meta name="description" content="ejercicios con javascript que permite obtener datos de los paises de centroamerica"/>
<meta name="keywords" content="ejercicio_paises, javascript, html, css"/>


<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">

</head>
<body>


<div id="container">
    <form name="frmpaises" id="frmpaises">
      <fieldset>
              <legend>Capturando Datos</legend>
             
              <div>
                    <label for="nombre">Región</label>
                      <select name="pcentro" id="pcentro" onchange="cambiar_pais(this.id, 'capital','moneda')">
                             <option value="0" selected>Elija un Pais</option>
                              <option value="Europa" >Europa</option>
                              <option value="Latinoamérica">Latinoamérica</option>
                              <option value="América Central">América Central</option>
                              <option value="Estados Unidos">Estados Unidos</option>
                           </select>
         </div>
                   
                  <div>
                         <label >Capital</label>

                                  <select  name="capital"  id="capital"   readonl></select>
                 </div>
                    

                 <div>
                      <label>Extension Territorial</label>
                      <input  name="ext" type="num" id="Extension" maxlength="7"  />
                </div>
                    <div>
                      <label>Numero de Habitantes</label>
                      <input   name="hab"  type="num" id="Nhabitantes" maxlength="7"  />
                    </div>
          <div>
                  <label>Moneda</label>
                  <select   name="moneda"  id="moneda"  readonly></select>
          </div>

               <input      name="enviar" type="button"  id="btnenviar"  value="ENVIAR" onclick="mostrar()"></input>
    </fieldset>
</form>
        <div name="mostrar_tabla">
        </div>

</div>    
          <script type="text/javascript" src="js/mis_funciones.js"></script>
          <script type="text/javascript" src="js/consulta.js"></script>
</body>
</html>

function cambiar_pais(s1,s2, s3){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    var s3 = document.getElementById(s3);
    s2.innerHTML = "";
    s3.innerHTML= "";

    if(s1.value == "Europa"){
        var optionArray = ["España|España", "Portugal|Portugal" , "Alemania|Alemania", "Francia|Francia", "Inglaterra|Inglaterra"];


    } else if(s1.value == "Latinoamérica"){
        var optionArray = ["argentina|Argentina", "colombia|Colombia", "perú|Perú" ];


    }else if(s1.value == "América Central"){
        var optionArray = ["México|México"];

    }else if(s1.value == "Estados Unidos"){
        var optionArray = ["Miami|Miami"];

    }else if(s1.value == "Nicaragua"){
        var optionArray = ["managua|Managua"];

    }else if(s1.value == "Costa Rica"){
        var optionArray = ["san jose|San Jose"];

     }else if(s1.value == "Panama"){
        var optionArray = ["ciudad de panama|Ciudad de Panama"];
    }   

    for(var option in optionArray){

        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
        
    }

        
}




function mostrar() 
{ 
    var pcentro=document.getElementById("pcentro"); 
    var capital=document.getElementById("capital"); 

    document.write( 
    "<table cellpadding='5' cellspacing='0' border='1'>" + 

    "<tr><td>DATOS</td><td>INFORMACION</td></tr>"+ 
    "<tr><td>"+pcentro.value+"</td>
    <td>"+capital.value+"</td>
    </table>" 
    ); 
} 





5
  • a mi también me gustaría saber como es tu formulario y que has intentado para no sentir que trabajo gratis para ti el 1 jul. 2020 a las 10:59
  • 1
    Deberias tener esos datos con un primary key y foreing key desde la base de datos para filtrarlos de ese modo de manera mas rapida y facil. el 1 jul. 2020 a las 11:46
  • @NicolasOñate hola! gracias por leer mi post, pues el formulario es como ese pero en Woocommerce, y queria hacer una adaptación con javascript para que muestren los campos correctos en cada region o continente.
    – ELE
    el 1 jul. 2020 a las 11:46
  • 2
    Si quitas el SELECT id="moneda" tienes que cambiar el onchange() y la función cambiar_pais() ya que te sobra el tercer argumento y el s3.innerHTML = ""; te da error.
    – juanrpozo
    el 1 jul. 2020 a las 12:15
  • Puedes usar jquery? el 2 jul. 2020 a las 8:29

1 respuesta 1

2

Deberías organizar mejor los datos, de esta forma será más fácil realizar las acciones adecuadas con ellos.

PROBLEMA

Se desea mostrar opciones en elementos tipo select de HTML, en cascada (es decir de acuerdo a la opción seleccionada en el elemento anterior). Si se cambia la selección en un elemento tipo select anterior, se deben mostrar las nuevas opciones de acuerdo a la selección realizada.

SOLUCIÓN

Lo primero es organizar la información, ya que si no tenemos un esquema claro de la misma, será muy difícil realizar la tarea.

Escogeré un formato JSON para almacenar los datos, pero se puede adaptar a cualquier otro formato.

Supongamos que tenemos 3 opciones iniciales, las cuales corresponden a 3 continentes:

  • África
  • América
  • Europa

En cada continente agruparemos 4 países:

  • África:

    • Nigeria
    • Marruecos
    • Botswana
    • Camerún
  • América:

    • Canadá
    • Bolivia
    • México
    • Venezuela
  • Europa:

    • Bélgica
    • Francia
    • Luxemburgo
    • Noruega

Bien, con esto ya tenemos una idea de la estructura que podemos armar para nuestros datos. Pero en tu pregunta hablas de comunidades autónomas. No soy experto en Geografía, pero te puedo decir que el único país que conozco hasta ahora (y conozco varios) en donde se usa el término comunidad autónoma es España. No digo que no haya otros, pero en general, cada país tiene un nombre para su división político - territorial interna. En todo caso, para mi ejemplo usaré sólo los nombres de 3 territorios de su división político - territorial.

El formato de datos puede quedar de la siguiente forma:

const data = {
  "África": {
    "Botswana": {
      "territorios": ["Ghanzi", "Kweneng", "Noroeste"]
    },
    "Camerún": {
      "territorios": ["Adamaoua", "Litoral", "Oeste"]
    },
    "Marruecos": {
      "territorios": ["Casablanca-Settat", "Fez-Mequinez", "Marrakech-Safí"]
    },
    "Nigeria": {
      "territorios": ["Adamawa", "Borno", "Plateau"]
    }
  },
  "América": {
    "Canadá": {
      "territorios": ["Alberta", "Ontario", "Saskatchewan"]
    },
    "Bolivia": {
      "territorios": ["Chuquisaca", "Cochabamba", "Oruro"]
    },
    "México": {
      "territorios": ["Chihuahua", "Sonora", "Zacatecas"]
    },
    "Venezuela": {
      "territorios": ["Aragua", "Bolívar", "Nueva Esparta"]
    }
  },
  "Europa": {
    "Bélgica": {
      "territorios": ["Bruselas-capital", "Flandes", "Región Valona"]
    },
    "Francia": {
      "territorios": ["Bretaña", "Normandía", "Occitania"]
    },
    "Luxemburgo": {
      "territorios": ["Diekirch", "Grevenmacher", "Luxemburgo"]
    },
    "Noruega": {
      "territorios": ["Agder", "Oslo", "Rogaland"]
    }
  }
}

Ahora debemos implementar la lógica para los elementos tipo select.

Podemos usar el evento change, junto con el atributo disabled. La idea es que los elementos tipo select se habiliten o deshabiliten en caso de que su antecesor no tuviese una opicón válida seleccionada.

Para usar el evento change debemos escribir el manejador de evento adecuado. En nuestro ejemplo tendremos 3 elementos tipo select. Por lo tanto vamos a escribir 2 funciones para manejar los eventos de los primeros dos elementos.

Nuestro primer elemento select tomará el como identificador: #continente. Nuestro segundo elemento tomará como identificador #pais y el tercer elemento tomará como identificador #territorio.

Nuestros elementos #pais y #territorio estarán deshabilitados por defecto. Cuando se seleccione un continente válido del elemento #continente, se habilitará el elemento #pais y sus valores serán los que correspondan a dicho continente. Cuando se seleccione un país válido, se habilitará el elemento #territorio y sus valores serán los que correspondan al país seleccionado.

La función que manejará el evento change para el elemento #continente la vamos a escribir así:

const continenteChange = function(event) {
  let continente = this.value;
  // restablecemos los elementos #pais y #territorio
  paisSelect.selectedIndex = 0;
  while(paisSelect.options.length > 1) {
    paisSelect.remove(paisSelect.options.length - 1);
  }
  territorioSelect.selectedIndex = 0;
  while(territorioSelect.options.length > 1) {
    territorioSelect.remove(territorioSelect.options.length - 1);
  }
  territorioSelect.setAttribute('disabled', '');
  if(this.value === 'default') {
    paisSelect.setAttribute('disabled', '');
    return;
  }
   
  //llenamos el elemento #pais de acuerdo al continente seleccionado
  let paises = Object.keys(data[continente]);
  paises.forEach(pais => {
    let option = document.createElement('option');
    option.value = pais;
    option.text = pais;
    paisSelect.add(option);
  });
  paisSelect.removeAttribute('disabled');
}

Esta lógica sería muy parecida para el evento change del elemento #pais, excepto que sólo haremos limpieza del elemento #territorio.

Ahora que ya tenemos los manejadores del evento change para nuestros elementos tipo select, podemos ver esto en acción:

const data = {
  "África": {
    "Botswana": {
      "territorios": ["Ghanzi", "Kweneng", "Noroeste"]
    },
    "Camerún": {
      "territorios": ["Adamaoua", "Litoral", "Oeste"]
    },
    "Marruecos": {
      "territorios": ["Casablanca-Settat", "Fez-Mequinez", "Marrakech-Safí"]
    },
    "Nigeria": {
      "territorios": ["Adamawa", "Borno", "Plateau"]
    }
  },
  "América": {
    "Canadá": {
      "territorios": ["Alberta", "Ontario", "Saskatchewan"]
    },
    "Bolivia": {
      "territorios": ["Chuquisaca", "Cochabamba", "Oruro"]
    },
    "México": {
      "territorios": ["Chihuahua", "Sonora", "Zacatecas"]
    },
    "Venezuela": {
      "territorios": ["Aragua", "Bolívar", "Nueva Esparta"]
    }
  },
  "Europa": {
    "Bélgica": {
      "territorios": ["Bruselas-capital", "Flandes", "Región Valona"]
    },
    "Francia": {
      "territorios": ["Bretaña", "Normandía", "Occitania"]
    },
    "Luxemburgo": {
      "territorios": ["Diekirch", "Grevenmacher", "Luxemburgo"]
    },
    "Noruega": {
      "territorios": ["Agder", "Oslo", "Rogaland"]
    }
  }
}

// instanciamos los elementos select
let continenteSelect = document.getElementById('continente');
let paisSelect = document.getElementById('pais');
let territorioSelect = document.getElementById('territorio');

// llenamos el select #continente
let continentes = Object.keys(data);
continentes.forEach(continente => {
  const option = document.createElement('option');
  option.value = continente;
  option.text = continente;
  continenteSelect.add(option, null);
});

//funciones para manejar evento change
const continenteChange = function(event) {
  let continente = this.value;
  // restablecemos los elementos #pais y #territorio
  paisSelect.selectedIndex = 0;
  while(paisSelect.options.length > 1) {
    paisSelect.remove(paisSelect.options.length - 1);
  }
  territorioSelect.selectedIndex = 0;
  while(territorioSelect.options.length > 1) {
    territorioSelect.remove(territorioSelect.options.length - 1);
  }
  territorioSelect.setAttribute('disabled', '');
  if(this.value === 'default') {
    paisSelect.setAttribute('disabled', '');
    return;
  }
   
  //llenamos el elemento #pais de acuerdo al continente seleccionado
  let paises = Object.keys(data[continente]);
  paises.forEach(pais => {
    let option = document.createElement('option');
    option.value = pais;
    option.text = pais;
    paisSelect.add(option);
  });
  paisSelect.removeAttribute('disabled');
}

const paisChange = function(event) {
  let pais = this.value;
  let continente = continenteSelect.value;
  // limpiamos el elemento #territorio
  territorioSelect.selectedIndex = 0;
  while(territorioSelect.options.length > 1) {
      territorioSelect.remove(territorioSelect.options.length - 1);
  }
  if(this.value === 'default') {
    territorioSelect.setAttribute('disabled', '');
    return;
  }
  let territorios = data[continente][pais]['territorios'];
  territorios.forEach(territorio => {
    let option = document.createElement('option');
    option.value = territorio;
    option.text = territorio;
    territorioSelect.add(option);
  });
  territorioSelect.removeAttribute('disabled');
}

// añadimos los manejadores de evento
continenteSelect.addEventListener('change', continenteChange);
paisSelect.addEventListener('change', paisChange);
<select id="continente">
  <option value="default">Seleccione: </option>
</select>

<select id="pais" disabled>
  <option value="default">Seleccione: </option>
</select>

<select id="territorio" disabled>
  <option value="default">Seleccione: </option>
</select>

Tal vez parezca un poco confuso, pero es una primera aproximación de cómo podrías implementar tu solución.

Espero que esto te ayude a resolver el problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.