0

necesito ayuda con las listas desplegables/select, me he perdido un poco. Quiero que se me muestre un select "provincias" según la comunidad autónoma que hayamos seleccionado antes. Los datos están guardados en un array.

Creo una variable vector que accedera al indice de provincias var vector=provincias[indice]. Nueva variable para dar nombre al segundo select.

CReamos el bucle for que va a recorrer todos los indices del vector. Vamos a añadir una nueva opción con new Option(vector[i],i)

<script type="text/javascript">

 
 var provincias=[[['Jaen'],['Cordoba'],['Sevilla'], ['Huelva'],['Cadiz'], ['Malaga'], ['Granada'], ['Almeria']];

 


 function mostrarProvincias(incdice){
  
  var vector=provincias[indice];
  var lst1=document.getElementById('provincias');
  var nuevaOpcion;

  for (var i=0;i<vector.length;i++) {

   nuevaOpcion = new Option(vector[i],i);
   lst1.options[lst1.length]=nuevaOpcion;
  }
  

 }

</script>
<body>
  <tr>
   <select onclick="mostrarProvincias()" id="lista1">
    <option value="and">Andalucía</option>
    <option value="ara">Aragón</option>
    <option value="lrio">La Rioja</option>
    <option value="bal">Islas Baleares</option>
    <option value="cat">Cataluña</option>
    <option value="cana" >Canarias</option>
    <option value="cant">Cantabria</option>
    <option value="casM">Castilla-La Mancha</option>
    <option value="casL">Castilla y León</option>
    <option value="mad">Comunidad de Madrid</option>
    <option value="nav">Comunidad Foral de Navarra</option>
    <option value="val" >Comunidad Valenciana</option>
    <option value="ext">Extremadura</option>
    <option value="gal">Galicia</option>
    <option value="pvas">País Vasco</option>
    <option value="ast">Principado de Asturias</option>
    <option value="mur">Región de Murcia</option>

  </select> 

  <select id="provincias">
    <option value="Comunidad Valenciana" selected>Comunidad Valenciana</option>
    <option value="can">Islas Canarias</option>
    <option value="mad">Madrid</option>
    <option value="and">Andalucía</option>
    <option value="gal">Galicia</option>
    <option value="ext">Extremadura</option>
  </select>

 <tr>

</body>
</html>
Alejandro Castro Ecija
  • 13
  • 4

2 Answers2

0

Buscando un poco por internet lo sacas fácil 

for (var i=0;i<vector.length;i++) {
var option = document.createElement("option");
option.text = vector[i];
lst1.add(option);
}
Fergush
  • 438
  • 3
  • 11
0

En vez de onclick usaré onchange, esto se activa cada vez que se cambia el valor del select. Al cambiar el valor se llama a la función, en mi caso la nombraré elegir().

En este ejemplo usaré otros valores para las opciones del select:

  1. Primer select: Valores Uno y Diez.
  2. Segundo select. Si en el primer select se elige:
    2.1. Uno: Valores: Dos y Tres.
    2.2. Diez: Valores: Veinte y Treinta.

var valores = [
    ["Uno",["Dos","Tres"]]
    ,["Diez",["Veinte","Treinta"]]
];

Función elegir():

  1. Se declaran variables para cada select:

    var primer_seleccionador = document.getElementById("x1")
var segundo_seleccionador = document.getElementById("x10")

  2. A partir del array de valores, mediante map se recupera una lista de las opciones del primer select:

    var lista = valores.map(function(x){return x[0]})

    Esto significa que se obtiene un array como el siguiente:

    [ "Uno", "Diez" ] Lo llamaremos lista.

  3. Se obtiene la opción seleccionada del primer select, puede ser Uno o Diez, en este caso usaré Diez:

    var seleccionado = primer_seleccionador.value

  4. Se obtiene la posición donde se encuentra la opción seleccionada del primer select, que en este caso es lista, comenzando las posiciones en 0. Como dijimos en el paso 3, buscaremos Diez en la lista del paso 2, que es [ "Uno", "Diez" ]

    var posición = lista.indexOf(seleccionado)

    El resultado para la posición es 1, como se muestra en la siguiente tabla:

     [ "Uno", "Diez" ]
      0       1 <= Se encuentra "Diez" aquí.

  5. A partir de la posición encontrada y la lista de valores, creamos la lista de opciones para el segundo select.

    var nueva_lista = valores[posición]

    Primero elegimos la sub-lista de valores que esté en la posición, que es 1:

    var valores=[
    ["Uno",["Dos","Tres"]] // Si posición fuera 0
    ,["Diez",["Veinte","Treinta"]] //  Si fuera 1. Sí, es 1, elegimos esta
];

    Entonces obtenemos que nueva_lista es:

    ["Diez",["Veinte","Treinta"]]

    No nos interesa el primer valor, ya que pertenece al primer select. Entonces por eso usamos [1] en valores[posición][1], para obtener solo las opciones del segundo select. Entonces obtendremos lo siguiente:

    ["Veinte","Treinta"]

  6. Vaciamos el segundo select:

    segundo_seleccionador.innerHTML = ""

  7. A partir de la nueva lista creada (nueva_lista) en el paso 5, se lo recorre con map y se van creando opciones mediante new Option, aunque bien podría ser con document.createElement("option") y se las va agregando al segundo select.

    nueva_lista.map(function(x){
    var nueva_opción = new Option(x)
    segundo_seleccionador.appendChild(nueva_opción)
})

    Entonces, al elegir en el primer select el Diez, en el segundo select estarán las opciones Veinte y Treinta.

Código completo:

var valores=[
 ["Uno",["Dos","Tres"]]
 ,["Diez",["Veinte","Treinta"]]
]
function elegir(){
 var primer_seleccionador = document.getElementById("x1")
 var segundo_seleccionador = document.getElementById("x10")
 var lista = valores.map(function(x){return x[0]})
 var seleccionado = primer_seleccionador.value
 var posición = lista.indexOf(seleccionado)
 var nueva_lista = valores[posición][1]
 segundo_seleccionador.innerHTML = ""
 nueva_lista.map(function(x){
  var nueva_opción = new Option(x)
  segundo_seleccionador.appendChild(nueva_opción)
 })
 console.log( JSON.stringify(nueva_lista) )
}
<select onchange="elegir()" id="x1">
 <option>Uno</option>
 <option>Diez</option>
</select>
<select id="x10">
 <option selected>Diez</option>
 <option>Veinte</option>
</select>