根据第一个下拉框的值预填充第二个下拉框

Question

I am trying to prefill second dropdown list based on first dropdown list values.... its working fine if i use school_bag instead of school bag [space b/w 2 words] or school(bag) [if we use charactar ( ] , but i want to make it work if i use school bag or school(bag) also....

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

<script>
var mealsByCategory = {
    school bag: ["Soup", "Juice", "Tea", "Others"],
    school(bag): ["Soup", "Juice", "Water", "Others"],

}

    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;
        }
    }
    </script>

Answer 1

Try using "school (bag)": [ ... ] and you could try using a different approach, like var

bag1 = { 
   name: "school (bag), 
   elements: [ ... ] 
}