0

Quiero llenar 2 combos (selects HTML), uno ya esta lleno con áreas, pero el otro no. El segundo combo depende de lo que se selecciona en el primero. Para esto tengo el siguiente arreglo JSON en una variable JavaScript:

var datos=[
{"area_id":"1","proceso_id":"28","nombre":"Gesti\u00f3n de Planeamiento Estrat\u00e9gico"},
{"area_id":"1","proceso_id":"15","nombre":"Gesti\u00f3n de Calidad y Servicio al Cliente"},
{"area_id":"1","proceso_id":"45","nombre":"Mesa de partes \/ Recepci\u00f3n"},
{"area_id":"1","proceso_id":"42","nombre":"Gesti\u00f3n Secretar\u00eda General"},
{"area_id":"2","proceso_id":"7","nombre":"Conflicto de Inter\u00e9s"},
{"area_id":"2","proceso_id":"59","nombre":"Tolerancia cero"},
{"area_id":"2","proceso_id":"4","nombre":"C\u00f3digo de Conducta"},
{"area_id":"2","proceso_id":"33","nombre":"Gesti\u00f3n de Riesgo Operacional"},
{"area_id":"2","proceso_id":"14","nombre":"Gesti\u00f3n de Auditor\u00eda Interna"},
{"area_id":"3","proceso_id":"11","nombre":"Fondeo de Recursos "},
{"area_id":"3","proceso_id":"48","nombre":"Otorgamiento de Cr\u00e9ditos"},
{"area_id":"3","proceso_id":"21","nombre":"Gesti\u00f3n de Garant\u00edas"},
{"area_id":"3","proceso_id":"54","nombre":"Recaudaci\u00f3n"},
{"area_id":"4","proceso_id":"21","nombre":"Gesti\u00f3n de Garant\u00edas"},
{"area_id":"4","proceso_id":"35","nombre":"Gesti\u00f3n de Seguros"},
{"area_id":"4","proceso_id":"54","nombre":"Recaudaci\u00f3n"},
{"area_id":"4","proceso_id":"23","nombre":"Gesti\u00f3n de Infraestructura"},
{"area_id":"6","proceso_id":"24","nombre":"Gesti\u00f3n de Log\u00edstica"},
{"area_id":"6","proceso_id":"58","nombre":"Servicios tercerizados"},
{"area_id":"6","proceso_id":"53","nombre":"Productos tercerizados"},
{"area_id":"6","proceso_id":"52","nombre":"Proceso de atenci\u00f3n de proyectos y requerimientos"},
{"area_id":"7","proceso_id":"39","nombre":"Gesti\u00f3n del Riesgo Ambiental"},
{"area_id":"7","proceso_id":"17","nombre":"Gesti\u00f3n de Contratos"},
{"area_id":"7","proceso_id":"29","nombre":"Gesti\u00f3n de Poderes"},
{"area_id":"7","proceso_id":"31","nombre":"Gesti\u00f3n de Procesos Legales"},
{"area_id":"8","proceso_id":"25","nombre":"Gesti\u00f3n de Marketing"},
{"area_id":"8","proceso_id":"46","nombre":"Nuevos productos "},
{"area_id":"8","proceso_id":"5","nombre":"Compensaciones del Colaborador"},
{"area_id":"8","proceso_id":"47","nombre":"Nuevos Servicios"},
{"area_id":"9","proceso_id":"32","nombre":"Gesti\u00f3n de Proveedores"},
{"area_id":"9","proceso_id":"16","nombre":"Gesti\u00f3n de Contrapartes"},
{"area_id":"9","proceso_id":"37","nombre":"Gesti\u00f3n de Ventas"},
{"area_id":"9","proceso_id":"51","nombre":"Pre Ventas"},
{"area_id":"10","proceso_id":"27","nombre":"Gesti\u00f3n de Pagos"},
{"area_id":"10","proceso_id":"35","nombre":"Gesti\u00f3n de Seguros"},
{"area_id":"14","proceso_id":"57","nombre":"Selecci\u00f3n de personal"},
{"area_id":"14","proceso_id":"55","nombre":"Reclutamiento y selecci\u00f3n de personal"},
{"area_id":"14","proceso_id":"38","nombre":"Gesti\u00f3n del Colaborador"},
{"area_id":"14","proceso_id":"5","nombre":"Compensaciones del Colaborador"},
];

Quiero llenar el segundo combo con los campos "proceso_id" y "nombre". El campo "area_id" es el value que se selecciona en el primer combo. Es decir, si en el primer combo selecciono el "area_id" 1, en el segundo combo deben cargarse los "procesos_id" 28, 15, 45 42. Este es código HTML de los combos:

<table><tr>
<td>Área de la empresa</td>
<td><select id="idarea" name="idarea" onChange="areaEmpresa()" >
<option value="0">Seleccione un area</option>
<option value='4'>Financiera y Contable</option>
<option value='7'>Legal</option>
<option value='8'>RRHH</option>
<option value='10'>Ventas</option>
</select></td>
</tr>
<tr>
<td>Proceso</td>
<td><select id="proceso" name="proceso" >
<option value='0'>Seleccione un proceso</option>
</select></td>
</tr></table>

Estuve viendo que para esto se puede usar JSON o AJAX, pero nunca use esas herramientas y no creo que estén cargadas en mi sitio. Muchas gracias por su ayuda.

1
  • ¿Todavía necesitas ayuda con esto? Commented el 26 oct. 2020 a las 1:51

2 respuestas 2

1

/// variable con datos

var datos=[
{"area_id":"1","proceso_id":"28","nombre":"Gesti\u00f3n de Planeamiento Estrat\u00e9gico"},
{"area_id":"1","proceso_id":"15","nombre":"Gesti\u00f3n de Calidad y Servicio al Cliente"},
{"area_id":"1","proceso_id":"45","nombre":"Mesa de partes \/ Recepci\u00f3n"},
{"area_id":"1","proceso_id":"42","nombre":"Gesti\u00f3n Secretar\u00eda General"},
{"area_id":"2","proceso_id":"7","nombre":"Conflicto de Inter\u00e9s"},
{"area_id":"2","proceso_id":"59","nombre":"Tolerancia cero"},
{"area_id":"2","proceso_id":"4","nombre":"C\u00f3digo de Conducta"},
{"area_id":"2","proceso_id":"33","nombre":"Gesti\u00f3n de Riesgo Operacional"},
{"area_id":"2","proceso_id":"14","nombre":"Gesti\u00f3n de Auditor\u00eda Interna"},
{"area_id":"3","proceso_id":"11","nombre":"Fondeo de Recursos "},
{"area_id":"3","proceso_id":"48","nombre":"Otorgamiento de Cr\u00e9ditos"},
{"area_id":"3","proceso_id":"21","nombre":"Gesti\u00f3n de Garant\u00edas"},
{"area_id":"3","proceso_id":"54","nombre":"Recaudaci\u00f3n"},
{"area_id":"4","proceso_id":"21","nombre":"Gesti\u00f3n de Garant\u00edas"},
{"area_id":"4","proceso_id":"35","nombre":"Gesti\u00f3n de Seguros"},
{"area_id":"4","proceso_id":"54","nombre":"Recaudaci\u00f3n"},
{"area_id":"4","proceso_id":"23","nombre":"Gesti\u00f3n de Infraestructura"},
{"area_id":"6","proceso_id":"24","nombre":"Gesti\u00f3n de Log\u00edstica"},
{"area_id":"6","proceso_id":"58","nombre":"Servicios tercerizados"},
{"area_id":"6","proceso_id":"53","nombre":"Productos tercerizados"},
{"area_id":"6","proceso_id":"52","nombre":"Proceso de atenci\u00f3n de proyectos y requerimientos"},
{"area_id":"7","proceso_id":"39","nombre":"Gesti\u00f3n del Riesgo Ambiental"},
{"area_id":"7","proceso_id":"17","nombre":"Gesti\u00f3n de Contratos"},
{"area_id":"7","proceso_id":"29","nombre":"Gesti\u00f3n de Poderes"},
{"area_id":"7","proceso_id":"31","nombre":"Gesti\u00f3n de Procesos Legales"},
{"area_id":"8","proceso_id":"25","nombre":"Gesti\u00f3n de Marketing"},
{"area_id":"8","proceso_id":"46","nombre":"Nuevos productos "},
{"area_id":"8","proceso_id":"5","nombre":"Compensaciones del Colaborador"},
{"area_id":"8","proceso_id":"47","nombre":"Nuevos Servicios"},
{"area_id":"9","proceso_id":"32","nombre":"Gesti\u00f3n de Proveedores"},
{"area_id":"9","proceso_id":"16","nombre":"Gesti\u00f3n de Contrapartes"},
{"area_id":"9","proceso_id":"37","nombre":"Gesti\u00f3n de Ventas"},
{"area_id":"9","proceso_id":"51","nombre":"Pre Ventas"},
{"area_id":"10","proceso_id":"27","nombre":"Gesti\u00f3n de Pagos"},
{"area_id":"10","proceso_id":"35","nombre":"Gesti\u00f3n de Seguros"},
{"area_id":"14","proceso_id":"57","nombre":"Selecci\u00f3n de personal"},
{"area_id":"14","proceso_id":"55","nombre":"Reclutamiento y selecci\u00f3n de personal"},
{"area_id":"14","proceso_id":"38","nombre":"Gesti\u00f3n del Colaborador"},
{"area_id":"14","proceso_id":"5","nombre":"Compensaciones del Colaborador"},
];
const proceso = document.querySelector("#proceso");
    const idarea = document.querySelector("#idarea");
    const transfer = (items, a)=>{  
      proceso.options = ""
      items.map((data)=>{
          if(data.area_id === a){
          let option = document.createElement("option");
          option.text = data.nombre;
          proceso.add(option);  
          }
          
      })
      
    }
    idarea.addEventListener("change",()=>{
      let value2 = idarea.value
      transfer(datos, value2)
    })
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table><tr>
<td>Área de la empresa</td>
<td><select id="idarea" name="idarea">
<option value="0">Seleccione un area</option>
<option value='4'>Financiera y Contable</option>
<option value='7'>Legal</option>
<option value='8'>RRHH</option>
<option value='10'>Ventas</option>
</select></td>
</tr>
<tr>
<td>Proceso</td>
<td><select id="proceso" name="proceso" >

  <option value='0'>Seleccione un proceso</option>
  
</select></td>
</tr></table>
</body>
</html>

//Declaramos una constante llamada 'proceso'
    //El valor que tendra sera el elemento o objeto con id proceso
    const proceso = document.querySelector("#proceso");

    //Declaramos una constante llamada 'idarea'
    //El valor que tendra sera el elemento o objeto con id idarea
    const idarea = document.querySelector("#idarea");

    //Declaramos una constante llamada transfer
    //Esta contiene dentro de ella una función anonima o función flecha con dos parametros, el primero para la lista de datos y el segundo para el valor que tiene idarea
    const transfer = (items, a)=>{

      //accedemos los options que tiene el elemento proceso para dejarlos vacio en cada llamado  
      proceso.options = ""

      //sienod items(data) un array, podemos aplicar la función map, que mapea todos los valores que contengan el array. Map es algo parecido a un ciclo, solo que a este no le limitas cuantas vueltas dara, sino que se basara en el objecto que hallas llamado para aplicarlo y su contenido
      //el parametro no es mas que otra funcion anonima que recibe el elemento en el que se encuentra posicionado
      items.map((data)=>{

          //realizamos nuestra condicion
          //si data[posicion].area_id es igual a nuestro segundo parametro incial, el valor de idarea, entonces rellena los options de la lista de proceso
          if(data.area_id === a){

          //creamos una variable temporal, para cada vuelta llamada option, dentro de ella crearemos un objeto o un elemento <option>
          let option = document.createElement("option");
          //accedemos al a propiedad text del elemento anterior creado para asignarle un text
          option.text = data.nombre;
          //agregamos este objeto option a la lista de options de proceso
          proceso.add(option);  
          }
          
      })
      
    }

    //Aqui cogemos al elemento idarea y le aplicamos un evento de tipo cambio, es decir, que cuando nosotros modificamos el elemento, al finalizar eso se ejecutara todo lo que tenga
    //Para eso llamado a la funcion addEventListener que recibe dos parametros, el primero, que tipo de accion tendra nuestro elemento, puede ser click, dblClick, change, etc... y el segundo, una función anonima.

    idarea.addEventListener("change",()=>{

    //aqui declaro una variable temporal, con el valor del select idarea
      let value2 = idarea.value
    //una vez almacenado, llamamos a la función anonima transfer
      transfer(datos, value2)
    })
4
  • Por favor lee Cómo responder, considera editar y explicar tu aporte
    – user128299
    Commented el 26 oct. 2020 a las 3:03
  • @Alex gracias por tu respuesta. Pero podrías explicarme para que sirve cada parte del código. es que soy nuevo con JavaScript. Otra consulta, como se ejecuta ese código cuando selecciona el combo "idarea". Commented el 26 oct. 2020 a las 23:14
  • ¡Espero que te pueda ser util! Ya edite la función con la explicación, mucha suerte @WalterCorpus
    – Alex
    Commented el 27 oct. 2020 a las 0:06
  • @Alex gracias por tu respuesta de nuevo, pero ahora el problema es que las opciones se acumulan cuando selecciono mas de una opción en el combo "Área de la empresa". Solo deberían aparecer 4 opciones en el combo Proceso. Commented el 29 oct. 2020 a las 21:35
0

En la solución que me envió @Alex no funciona la línea:

proceso.options = ""

No entiendo porque. Así que luego de buscar mucho, la solución, que me funciona a mi, es la siguiente:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
//Agrego esta línea para que funcione el JQuery
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var datos=[{"area_id":"1","proceso_id":"28","nombre":"Gesti\u00f3n de Planeamiento Estrat\u00e9gico"},
{"area_id":"1","proceso_id":"15","nombre":"Gesti\u00f3n de Calidad y Servicio al Cliente"},
{"area_id":"1","proceso_id":"45","nombre":"Mesa de partes \/ Recepci\u00f3n"},
{"area_id":"1","proceso_id":"42","nombre":"Gesti\u00f3n Secretar\u00eda General"},
{"area_id":"2","proceso_id":"7","nombre":"Conflicto de Inter\u00e9s"},
{"area_id":"2","proceso_id":"59","nombre":"Tolerancia cero"},
{"area_id":"2","proceso_id":"4","nombre":"C\u00f3digo de Conducta"},
{"area_id":"2","proceso_id":"33","nombre":"Gesti\u00f3n de Riesgo Operacional"},
{"area_id":"2","proceso_id":"14","nombre":"Gesti\u00f3n de Auditor\u00eda Interna"},
{"area_id":"3","proceso_id":"11","nombre":"Fondeo de Recursos "},
{"area_id":"3","proceso_id":"48","nombre":"Otorgamiento de Cr\u00e9ditos"},
{"area_id":"3","proceso_id":"21","nombre":"Gesti\u00f3n de Garant\u00edas"},
{"area_id":"3","proceso_id":"54","nombre":"Recaudaci\u00f3n"},
{"area_id":"4","proceso_id":"21","nombre":"Gesti\u00f3n de Garant\u00edas"},
{"area_id":"4","proceso_id":"35","nombre":"Gesti\u00f3n de Seguros"},
{"area_id":"4","proceso_id":"54","nombre":"Recaudaci\u00f3n"},
{"area_id":"4","proceso_id":"23","nombre":"Gesti\u00f3n de Infraestructura"},
{"area_id":"6","proceso_id":"24","nombre":"Gesti\u00f3n de Log\u00edstica"},
{"area_id":"6","proceso_id":"58","nombre":"Servicios tercerizados"},
{"area_id":"6","proceso_id":"53","nombre":"Productos tercerizados"},
{"area_id":"6","proceso_id":"52","nombre":"Proceso de atenci\u00f3n de proyectos y requerimientos"},
{"area_id":"7","proceso_id":"39","nombre":"Gesti\u00f3n del Riesgo Ambiental"},
{"area_id":"7","proceso_id":"17","nombre":"Gesti\u00f3n de Contratos"},
{"area_id":"7","proceso_id":"29","nombre":"Gesti\u00f3n de Poderes"},
{"area_id":"7","proceso_id":"31","nombre":"Gesti\u00f3n de Procesos Legales"},
{"area_id":"8","proceso_id":"25","nombre":"Gesti\u00f3n de Marketing"},
{"area_id":"8","proceso_id":"46","nombre":"Nuevos productos "},
{"area_id":"8","proceso_id":"5","nombre":"Compensaciones del Colaborador"},
{"area_id":"8","proceso_id":"47","nombre":"Nuevos Servicios"},
{"area_id":"9","proceso_id":"32","nombre":"Gesti\u00f3n de Proveedores"},
{"area_id":"9","proceso_id":"16","nombre":"Gesti\u00f3n de Contrapartes"},
{"area_id":"9","proceso_id":"37","nombre":"Gesti\u00f3n de Ventas"},
{"area_id":"9","proceso_id":"51","nombre":"Pre Ventas"},
{"area_id":"10","proceso_id":"27","nombre":"Gesti\u00f3n de Pagos"},
{"area_id":"10","proceso_id":"35","nombre":"Gesti\u00f3n de Seguros"},
{"area_id":"14","proceso_id":"57","nombre":"Selecci\u00f3n de personal"},
{"area_id":"14","proceso_id":"55","nombre":"Reclutamiento y selecci\u00f3n de personal"},
{"area_id":"14","proceso_id":"38","nombre":"Gesti\u00f3n del Colaborador"},
{"area_id":"14","proceso_id":"5","nombre":"Compensaciones del Colaborador"}];

$(document).ready(function() {
  const datos=<?php echo $procesosJson; ?>;
  const proceso = document.querySelector("#proceso");
  const areaEmpresa = document.querySelector("#area_empresa");

  const transfer = (items, a)=>{
    //Estas líneas borran las opciones y agrega la opción "Seleccione un proceso"
    var $select = $('#proceso');
    $select.empty();
    $select.append('<option value=0>Seleccione un proceso</option>');

    items.map((data)=>{
      if (data.area_id === a){
        let option = document.createElement("option");
        option.text = data.nombre;
        proceso.add(option);  
      }
    })
  }

  areaEmpresa.addEventListener("change",()=>{
    let value2 = areaEmpresa.value
    transfer(datos, value2)
  })
});    
</script>
<body>
<table><tr>
<td>Área de la empresa</td>
<td><select id="area_empresa" name="area_empresa">
<option value="0">Seleccione un area</option>
<option value='4'>Financiera y Contable</option>
<option value='7'>Legal</option>
<option value='8'>RRHH</option>
<option value='10'>Ventas</option>
</select></td>
</tr>
<tr>
<td>Proceso</td>
<td><select id="proceso" name="proceso" >
  <option value='0'>Seleccione un proceso</option>
</select></td>
</tr></table>
</body>
</html>

Tu Respuesta

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

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