Home / Questions / 71985
Accepted
omaza1990
Asked: 2020-05-23 03:23:47 +0800 CST 2020-05-23 03:23:47 +0800 CST

Загрузите SELECT в зависимости от другого SELECT - Javascript - DOM

  • 772

Без использования jQuery, только Javascript.

Я хочу добавить параметры второго выбора в зависимости от значения, которое принимает первый выбор. Первый выбор выбирает провинцию, с которой мы хотим иметь дело, и автоматически, в зависимости от выбранной нами провинции, второй выбор (города) загружает данные.

HTML-код:

<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-код:

//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);
        });
    }
 }

Как сделать так, чтобы при выборе провинции автоматически загружались города этой провинции?

javascript

2 Answers

  1. Best Answer

    Возможным решением было бы хранить провинции как свойства в объекте, с городами в массиве как value , а при выборе провинции мы печатаем ее массив как параметры выбора «город»:

    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>

    Я удалил ваши комментарии, чтобы вы могли лучше идентифицировать мои.

    • 8

  2. Во-первых, не знаю, работает ли у вас функция загрузки первого выбора с провинциями, я бы поставил метод cargarProvincias()так, чтобы он выполнялся сразу после загрузки страницы:

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

    Теперь, чтобы загрузить города в этой провинции, добавьте событие onchangeк выбору:

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

    Итак, что я сделал, так это то, что каждый раз, когда вы меняете провинцию, вы вызываете метод cargarPueblosи передаете один valueиз выбранных вариантов.

    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);



    }

  }

    И было бы что-то вроде этого. В arraySelected поместите выбранный вами массив, вы должны основывать его на значении, которое вы передаете методу.

    • 1