JSFiddle - React, Tailwind, and code Playground

by Muzaffar Rasulov

HTML

<select onchange="loadSubdata(this)">
    <option>-- Select category --</option>
    <option value="0">Category zyro</option>
    <option value="1">Category one</option>
    <option value="2">Category two</option>
</select>

<select id="test">
    <option>-- Subcategory --</option>
</select>

JavaScript

function getDataAbstaraction(val, callback) {
    var data = {
        0:{},
        1: {11: '11', 12: '12'},
        2: {21: '21', 22: '22'}
    };
    callback(data[val]);
}

function loadSubdata(obj) {
    var val = obj.options[obj.selectedIndex].value;
    if (!val) {
        return;
    }

    getDataAbstaraction(val, function(data) {
        var opts = '<option>-- Subcategory --</option>';
        for (var i in data) {
            opts += '<option value="' + i + '">' + data[i] + '</option>';
        }
        document.getElementById('test').innerHTML = opts;
    });
}