Skip to main content
se añadieron 3 caracteres en el cuerpo
Origen Enlace

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

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

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

Origen Enlace

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>