mcmega,
медитируйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="demo"></div>
<div class="show"></div>
<script>
var apiData = [{"В" : [{ "кричалки" : 5, "дразнилки" : 8 }], "голове" : [{}], "моей" : [{}], "опилки" : [{}]},
{"Сочиняю" : [{ "Шумелки" : 15, "пыхтелки" : 18, "сопелки" : 34}], "я" : [{}], "неплохо" : [{}], "иногда" : [{}]}
];
function set_select(select, data) {
select.options.length = 0;
Object.keys(data).forEach(function(key, k) {
var value = typeof data[key] == "object" ? key : data[key];
select.options[k] = new Option(key, value)
})
}
function createS(selector, obj) {
selector = document.querySelector(selector);
var sel = document.createElement("select");
var selTwo = sel.cloneNode();
set_select(sel, obj);
selector.appendChild(sel);
selector.appendChild(selTwo);
function test()
{
alert(this.value)
}
function change_select() {
set_select(selTwo, obj[this.value][0]);
test.bind(selTwo)()
}
sel.addEventListener("change", change_select);
selTwo.addEventListener("change", test);
change_select.bind(sel)()
};
createS(".demo", apiData[0])
createS(".show", apiData[1])
</script>
</body>
</html>