根據第一個下拉框的值預填充第二個下拉框

Question

我正在嘗試根據第一個下拉列表值來預填充第二個下拉列表。...如果我使用school_bag而不是書包 [空格b / w 2個單詞]或school（bag） [如果我們使用charactar （ ]，但是如果我也使用書包或學校（書包），我想使其正常工作。

<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

嘗試使用"school (bag)": [ ... ] ，您可以嘗試使用其他方法，例如var

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