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.