JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<select name="meal" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<select name="category" id="category">
    <option value="" disabled selected>Select</option>
</select>

JavaScript

var mealsByCategory = {
    A: ["aSoup", "aJuice", "aTea", "aOthers"],
    B: ["bSoup", "bJuice", "bWater", "bOthers"],
    C: ["cSoup", "cJuice", "cCoffee", "cTea", "cOthers"]
}

    function changecat(value) {
        if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in mealsByCategory[value]) {
                catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
            }
            document.getElementById("category").innerHTML = catOptions;
        }
    }