JSFiddle - React, Tailwind, and code Playground

HTML

<select id="first"></select>
<select id="second"></select>
<select id="third"></select>

JavaScript

var data = {
    Animal: {
        Fish: ['Tuna', 'Salmon'],
        Mammal: ['Dog', 'Cat']
    },
    Object: {
        Metal: ['Aluminum', 'Mercury']
    }
};

var first = document.getElementById('first');
var second = document.getElementById('second');
var third = document.getElementById('third');

function change(fn) {
    if (this.addEventListener) {
        this.addEventListener("change", fn, false);
    }
    else {
        this.attachEvent("onchange", fn);
    }
}

function dataBind(select, arr) {
    select.innerHTML = "";

    for (var i = 0; i < arr.length; i++) {
        var op = document.createElement('option');
        op.setAttribute('value', arr[i]);
        op.appendChild(document.createTextNode(arr[i]));
        select.appendChild(op);
    }
};

function makeArrayFromProps(obj) {
    var arr = [];
    for (var name in obj) {
        if (obj.hasOwnProperty(name)) {
            arr.push(name);
        }
    }
    return arr;
}

function firstChange() {
    dataBind(second, makeArrayFromProps(data[first.value]));
    secondChange();
}

function secondChange() {
    dataBind(third, data[first.value][second.value]);
}

change.call(first, firstChange);
change.call(second, secondChange);

dataBind(first, makeArrayFromProps(data));
firstChange();
secondChange();