Load a SELECT depending on another SELECT - Javascript - DOM

Question

Load a SELECT depending on another SELECT - Javascript - DOM

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Without using jQuery, only Javascript.

I want to add the options of the second select depending on the value that the first select takes. The first select chooses the province we want to deal with, and automatically depending on the province we choose, the second select (towns) is loaded with data.

HTML Code:

<tr>
    <td align=right>Provincia:</td>
    <td align=left colspan=3>
        <select name="provincia" id="provincia">
            <option value="cargar_provincias();">Seleccione una Provincia...
        </select>
    </td>
</tr>
<tr>                    
    <!-- Extra: Cargar pueblos a partir de una provincia -->
    <td align=right>Pueblo:</td>
    <td align=left colspan=3>
        <select name="pueblo" id="pueblo">
            <option value="cargar_pueblos();">Seleccione un Pueblo...
        </select>
    </td>
</tr>

Javascript code:

//Función para cargar las provincias al campo "select".
function cargarProvincias() {
    //Inicializamos el array.
    var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
    //Ordena el array alfabeticamente.
    array.sort();
    //Pasamos a la funcion addOptions(el ID del select, las provincias cargadas en el array).
    addOptions("provincia", array);
}


//Función para agregar opciones a un <select>.
function addOptions(domElement, array) {
    var selector = document.getElementsByName(domElement)[0];
    //Recorremos el array.
    for (provincia in array) {
        var opcion = document.createElement("option");
        opcion.text = array[provincia];
        selector.add(opcion);
    }
}


//Función para cargar los pueblos al campo "select" dependiendo de la provincia elegida.
function cargarPueblos() {
    //Objeto de provincias con los pueblos correspondientes.
    var listaPueblos = {
        cantabria: ["Laredo", "Gama", "Solares", "Castillo", "Santander"],
        asturias: ["Langreo", "Villaviciosa", "Oviedo", "Gijon", "Covadonga"],
        galicia: ["Tui", "Cambados", "Redondella", "Porriño", "Ogrove"],
        andalucia: ["Dos Hermanas", "Écija", "Algeciras", "Marbella", "Sevilla"],
        extremadura: ["Caceres", "Badajoz", "Plasencia", "Zafra", "Merida"]
    }

    //Declaramos un array donde guardamos todos los elementos de tipo id=provincias e id=pueblos.
    var provincias = document.getElementById('provincia');
    var pueblos = document.getElementById('pueblo');
    //Tomamos como provinciaSeleccionada, el valor del id provincia (var provincias).
    var provinciaSeleccionada = provincias.value;

    //Se limpian los pueblos.
    pueblos.innerHTML = '<option value="">Seleccione un Pueblo...</option>'

    //Si existe provinciaSeleccionada...
    if(provinciaSeleccionada !== ""){
        //Se seleccionan los pueblos y se ordenan.
        provinciaSeleccionada = listaPueblos[provinciaSeleccionada];
        provinciaSeleccionada.sort();

        //Insertamos los pueblos mediante un FOR.
        provinciaSeleccionada.forEach(function(pueblo){
            var opcion = document.createElement('option');
            opcion.value = pueblo;
            opcion.text = pueblo;
            pueblos.add(opcion);
        });
    }
 }

How can I do so that when choosing a province the towns of that province are automatically loaded?

javascript select

asked by omaza1990 22.05.2017 в 13:23

source

2 answers

0

First, I do not know if the function of loading the first select with the provinces works for you, the cargarProvincias() method would put it so that it would run immediately after loading the page:

    <body onload="cargarProvincias()">
...
</body>

Now, to load the towns of that province, add an onchange event to the select:

select name="provincia" id="provincia" onchange="cargarPueblos(this.value)">
            <option value="cargar_provincias();">Seleccione una Provincia...
        </select>

So what I've done is, every time you change province, you call the cargarPueblos method and you pass the value of the chosen option.

function cargarPueblos(cargarProvincias) {
    //Inicializamos el array.
   //vacías la select cada vez que elijas una provincia
    document.getElementById("pueblo").innerHTML="";

    var pro_cantabria = ["Laredo", "Gama", "Solares", "Castillo", "Santander"];
    var pro_asturias = ["Langreo", "Villaviciosa", "Oviedo", "Gijon", "Covadonga"];
    var pro_galicia = ["Tui", "Cambados", "Redondella", "Porriño", "Ogrove"];
    var pro_andalucia = ["Dos Hermanas", "Écija", "Algeciras", "Marbella", "Sevilla"];
    var pro_extremadura = ["Caceres", "Badajoz", "Plasencia", "Zafra", "Merida"];
    //Ordena el array alfabeticamente.
    pro_cantabria.sort();
    pro_asturias.sort();
    pro_galicia.sort();
    pro_andalucia.sort();
    pro_extremadura.sort();

   for(var i=0; i<arraySeleccionado; i++){
        var option=document.createElement("OPTION");
        option.innerHTML=arraySeleccionado[i];
        document.getElementById("pueblo").appendChild(option);



    }

  }

And it would be something like that. In selected Array put the Array you choose, you have to base yourself on the value that you pass to the method.

answered by 22.05.2017 в 13:44

align icons to: link in a list Rounding Decimas de Double keeping the tenths [duplicated]

score 1 · Accepted Answer

A possible solution would be to store the provinces as properties in an object, with the villages in array as a value , and when choosing province we print your array as options for the 'village' select:

function cargarProvincias() {
    var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
    array.sort();
    addOptions("provincia", array);
}


//Función para agregar opciones a un <select>.
function addOptions(domElement, array) {
    var selector = document.getElementsByName(domElement)[0];
    for (provincia in array) {
        var opcion = document.createElement("option");
        opcion.text = array[provincia];
        // Añadimos un value a los option para hacer mas facil escoger los pueblos
        opcion.value = array[provincia].toLowerCase()
        selector.add(opcion);
    }
}



function cargarPueblos() {
    // Objeto de provincias con pueblos
    var listaPueblos = {
      cantabria: ["Laredo", "Gama", "Solares", "Castillo", "Santander"],
      asturias: ["Langreo", "Villaviciosa", "Oviedo", "Gijon", "Covadonga"],
      galicia: ["Tui", "Cambados", "Redondella", "Porriño", "Ogrove"],
      andalucia: ["Dos Hermanas", "Écija", "Algeciras", "Marbella", "Sevilla"],
      extremadura: ["Caceres", "Badajoz", "Plasencia", "Zafra", "Merida"]
    }
    
    var provincias = document.getElementById('provincia')
    var pueblos = document.getElementById('pueblo')
    var provinciaSeleccionada = provincias.value
    
    // Se limpian los pueblos
    pueblos.innerHTML = '<option value="">Seleccione un Pueblo...</option>'
    
    if(provinciaSeleccionada !== ''){
      // Se seleccionan los pueblos y se ordenan
      provinciaSeleccionada = listaPueblos[provinciaSeleccionada]
      provinciaSeleccionada.sort()
    
      // Insertamos los pueblos
      provinciaSeleccionada.forEach(function(pueblo){
        let opcion = document.createElement('option')
        opcion.value = pueblo
        opcion.text = pueblo
        pueblos.add(opcion)
      });
    }
    
  }
  
 // Iniciar la carga de provincias solo para comprobar que funciona
cargarProvincias();

<table>
   <tr>
      <td align=right>Provincia:</td>
      <td align=left colspan=3>
          <!-- Añadido onchange para cargar los pueblos -->
          <select name="provincia" id="provincia" onchange="cargarPueblos();">
              <!-- Hay que terminar los options -->
              <!-- 
                   Eliminado de value la llamada a la función,
                   si eso funciona lo desconocía, y aunque 
                   lo haga es totalmente innecesario, 
                   lo correcto es usar el evento onchange 
                -->
              <option value="">Seleccione una Provincia...</option>
          </select>
      </td>
  </tr>
  <tr>                    
      <td align=right>Pueblo:</td>
      <td align=left colspan=3>
          <select name="pueblo" id="pueblo">
              <!-- Hay que terminar los options -->
              <!-- 
                   Eliminado de value la llamada a la función,
                   si eso funciona lo desconocía, y aunque 
                   lo haga es totalmente innecesario, 
                   lo correcto es usar el evento onchange 
                -->
              <option value="">Seleccione un Pueblo...</option>
          </select>
      </td>
  </tr>
</table>

I have deleted your comments so you can better identify mine.