mcmega,
<!doctype html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<input value="Events" class="btn w45" onclick="createAPISelect('#eve', api[0]);" type="button">
<input value="Actions" class="btn w45" onclick="createAPISelect('#act', api[1]);" type="button">
<div id="eve"></div>
<div id="act"></div>
</body>
<script type="text/javascript">
var api =
[
{ "{{e1}}":[{"{{c1}}":"1","{{c2}}":"2","{{c3}}":"3"}],"{{e2}}":[{"{{c1}}":"1","{{c2}}":"2","{{c3}}":"3"}] },
{ "{{a1}}":[{"{{o1}}":"1","{{o2}}":"2","{{o3}}":"3"}],"{{a2}}":[{"{{o1}}":"1","{{o2}}":"2","{{o3}}":"3"}] }
];
// Загрузка API устройства
function setSelect(sel,obj){
sel.options.length=0;
Object.keys(obj).forEach(function(key,k){
var value=typeof obj[key]=='object' ? key : obj[key];
sel.options[k]=new Option(key,value);
})
}
function createAPISelect(id,obj){
var parEl=document.querySelector(id);
var select = parEl.querySelectorAll('select')
var sel = select.length ? select[0] : document.createElement('select');
var selTwo = select.length == 2 ? select[1] : sel.cloneNode();
setSelect(sel,obj);
parEl.appendChild(sel);
parEl.appendChild(selTwo);
function changeSelect(){setSelect(selTwo,obj[this.value][0]);}
sel.addEventListener('change',changeSelect);
changeSelect.bind(sel)();
//load();
}
</script>
</html>