JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<select id='category'></select>
<select id='item'></select>

JavaScript

/**
 * @author lottikarotti
 */
// Some boilerplate code..
var dom = {
    /**
     * @param {String} id
     */
    findSelect: function(id){
        var elem = document.getElementById(id);
        if(typeof elem.options.push === 'undefined'){
            elem.options.add = function add(value, defaultSelected){
                var i = this.length;
                this[i] = new Option(value, value, defaultSelected || false, false);                
            };
        }
        return elem;
    },
    
    /**
     * @param  {Object}  elem
     * @param  {Array}   opts
     * @parram {Boolean} addEmpty (optional)
     */
    setOptions: function(elem, opts, addEmpty){
        var i;
        elem.options.length = 0;
        if({}.toString.call(opts) !== '[object Array]'){
            return;
        }
        if(addEmpty === true){
            elem.options.add('-', true);
        }
        for(i=0; i<opts.length; i++){
            elem.options.add(opts[i]);
        }
    }
};

// The actual data..
var data = {
    'Obst': [
        'Apfel',
        'Banane',
        'Melone'
    ],
    'Gemüse':[
        'Gurke',
        'Paprika',
        'Tomate'
    ]
};

// Let's do the real work..
window.addEventListener('load', function load(){
    var keys = Object.keys(data);
    
    dom.category = dom.findSelect('category');
    dom.item = dom.findSelect('item');
    
    dom.setOptions(dom.category, keys, true);
    dom.setOptions(dom.item, data[keys[0]], true);
    
    dom.category.addEventListener('change', function(){
        dom.setOptions(dom.item, data[this.value], true);
    });
});