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>