1

Estuve probando varias páginas sobre como mostrar distintos <div>, pero al fusionar distintos PHP para lograr lo que quiero no me anda el código.

Estuve viendo esto:

var provincias_1 = new Array("-", "Andalucía", "Asturias", "Baleares", "Canarias", "Castilla y León", "Castilla-La Mancha", "...");
var provincias_2 = new Array("-", "Salta", "San Juan", "San Luis", "La Rioja", "La Pampa", "...");
var provincias_3 = new Array("-", "Cali", "Santamarta", "Medellin", "Cartagena", "...");
var provincias_4 = new Array("-", "Aisne", "Creuse", "Dordogne", "Essonne", "Gironde ", "...");

var todasProvincias = [
  [],
  provincias_1,
  provincias_2,
  provincias_3,
  provincias_4,
];

function cambia_provincia() {
  //tomo el valor del select del pais elegido 
  var pais
  pais = document.f1.pais[document.f1.pais.selectedIndex].value
  //miro a ver si el pais está definido 
  if (pais != 0) {
    //si estaba definido, entonces coloco las opciones de la provincia correspondiente. 
    //selecciono el array de provincia adecuado 
    mis_provincias = todasProvincias[pais]
    //calculo el numero de provincias 
    num_provincias = mis_provincias.length
    //marco el número de provincias en el select 
    document.f1.provincia.length = num_provincias
    //para cada provincia del array, la introduzco en el select 
    for (i = 0; i < num_provincias; i++) {
      document.f1.provincia.options[i].value = mis_provincias[i]
      document.f1.provincia.options[i].text = mis_provincias[i]
    }
  } else {
    //si no había provincia seleccionada, elimino las provincias del select 
    document.f1.provincia.length = 1
    //coloco un guión en la única opción que he dejado 
    document.f1.provincia.options[0].value = "-"
    document.f1.provincia.options[0].text = "-"
  }
  //marco como seleccionada la opción primera de provincia 
  document.f1.provincia.options[0].selected = true
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <form name="f1">
    <select name=pais onchange="cambia_provincia()">
      <option value="0" selected>Seleccione...
        <option value="1">España
          <option value="2">Argentina
            <option value="3">Colombia
              <option value="4">Francia
    </select>
    <select name=provincia>
      <option value="-">-</option>
    </select>
  </form>
</body>

</html>

MI CODIGO Este es el actualmente lo que tengo cargado SIN lo de arriba

<center>
<object data="https://www.exodo.argentumgame.com/stats/fight.html" type="text/html" width="500" height="300">
</center>

¿Como ocultar un div al mostrar otro?

PROBLEMA

Necesito hacer que cargue más de un contenedor de html a través del seleccionador de arriba. Al poner por ejemplo España me muestre un object, al poner Argentina cargue otro object, y así sucesivamente. Que vaya ocultando los anteriores y mostrando el seleccionado

2
  • evitar agregar link externos, segundo agrega tu codigo como texto y resume tu duda a una sola pregunta especifica y de paso hace el recorrido que te ofrece el sitio para entender como funciona. el 22 ene. 2021 a las 14:58
  • Hola Ramiro disculpa, ahí edite el código. Espero que esté correcto. Gracias por la rapidez el 22 ene. 2021 a las 15:23

1 respuesta 1

0

Lo que tienes que hacer es cambiar el select por un div que cambia su contenido cada vez que cambia el select de países:

 var provincias_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...");
  var provincias_2=new Array("-","Salta","San Juan","San Luis","La Rioja","La Pampa","...");
  var provincias_3=new Array("-","Cali","Santamarta","Medellin","Cartagena","...");
  var provincias_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...");


  var provincia=document.getElementById('provincia');

  var todasProvincias = [
    [],
    provincias_1,
    provincias_2,
    provincias_3,
    provincias_4,
  ];

  function cambia_provincia(){ 
    //tomo el valor del select del pais elegido 
    var pais 
    pais = document.f1.pais[document.f1.pais.selectedIndex].value 
    //miro a ver si el pais está definido 
    if (pais != 0) { 
        //si estaba definido, entonces coloco las opciones de la provincia correspondiente. 
        //selecciono el array de provincia adecuado 
        mis_provincias=todasProvincias[pais]
        //calculo el numero de provincias 
        num_provincias = mis_provincias.length 
   
        //para cada provincia del array, la introduzco en el select 
        provincia.innerHTML='';
        for(i=0;i<num_provincias;i++){ 
          provincia.innerHTML+=mis_provincias[i]+'<br>';
        }   
    }else{ 
        //si no había provincia seleccionada, elimino las provincias del contenedor 
        provincia.innerHTML='';
       
    } 
    
}
.f1{
    
}
.f1 select{
    color: #2980b9;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>

    <form name="f1" class="f1"> 

        <select name=pais onchange="cambia_provincia()"> 
        <option value="0" selected>Seleccione... 
        <option value="1">España 
        <option value="2">Argentina 
        <option value="3">Colombia 
        <option value="4">Francia 
        </select>
    
        <div class="contendor" id="provincia">

        </div>
        
      
      </form>


      <script src="./index.js"></script>
</body>
</html>

5
  • Muy util y para agregar esto en vez de la lista de provincias? codigo <center> <object data="exodo.argentumgame.com/stats/fight.html" type="text/html" width="500" height="300"> </center> PD: Lo que tiene el contenido de ese html es una tabla personalizada, con datos. el 22 ene. 2021 a las 16:09
  • Me di cuenta que puedo editar los array por el contenido de mi tabla y lo carga, pero quisier asacar la parte de array y que provincias_1 sea un solo texto el 22 ene. 2021 a las 16:19
  • Pues ahí ya tendrías que jugar un poco con el for. El for que recorre num_provincias. Debes cambiar los array de provincias por el objeto o los objetos que vas a usar en tu tabla y en el for creas el html para agregar uno por uno a la tabla , los tr y los td sino me equivoco. el 22 ene. 2021 a las 16:28
  • Justo cuando puse eso me puse a jugar cambiando la variable array por una de texto, y en el "texto" pongo el html de la tabla con los datos. Así que doy esto por solucionado. Tengo que hacer algo mas para marcar como solucionado o ya está? marque como correcta la respuesta. Gracias x tu tiempo el 22 ene. 2021 a las 16:54
  • Ya está. Con gusto. el 22 ene. 2021 a las 17:24

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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