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

Question

我正在尝试根据第一个下拉列表值来预填充第二个下拉列表。...如果我使用 school_bag 而不是 school bag ，则可以正常工作[空格b / w 2个单词]或 school（bag） [如果我们使用字符（]]，但是如果我使用书包或school（bag），我想使其正常工作）。...

<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: [ ... ] 
}