Javascript 如何创建相互依赖的下拉列表

我想创建4个下拉列表。 像这样：

    District: 

<select id="district">
    <option>Select a District</option>
    <option value="district1">dstrict1</option>
    
</select>

<br>
<br>

School: 
<select id="school">
    <option value=school1><a id="school1">Select a District</a></option>
    <option value=school2><a id="school2">Select a district</a></option>
    </select>
    <br>
    <br>
Grade: 
<select id="grade">
    <option value="grade1">Select a school</option>
    <option value="grade2">7th grade</option>
    <option value="grade3">8th grade</option>
    <br>
    <br>
    </select>
House: 
<select id="grade">
    <option>Select a school</option>
    <option value="house1">house1</option>
    <option value="house2">house2</option>
    <br>
    <br>
    </select>

地区:
选择一个地区
dstrict1




学校：
选择一个地区
选择一个地区




等级：
择校
七年级
八年级




众议院：
择校
1号住宅
房子2

---

但是，我希望学校列表中显示的项目（以及值）取决于我选择的地区。除此之外，成绩列表（以及数值）取决于您选择的学校。最后，房屋列表（以及值）需要取决于您选择的等级。我正在使用一个不支持附加组件的程序，因此代码需要是纯html和javascript。这个问题有几个层次。但我基本上认为，您需要研究的是根据所选内容通过javascript生成列表或数组

在不知道项目规模的情况下，我会使用json数组来填充列表中的所有数据。这方面的一个例子可能是：

var schoolListData = {
    "schools": {
        "school1": {
            "name": "school 1",
            "id": "1",
            "categories": ["district1", "grade2"]
        },
        "school2": {
            "name": "school 2",
            "id": "2",
            "categories": ["district2", "grade1"]
        }
    },
    "grades": {
        "grade1": {
            "name": "grade 1",
            "id": "1",
            "categories": ["school1", "grade2"]
        },
        "grade2": {
            "name": "grade 2",
            "id": "2",
            "categories": ["school2", "grade3"]
        },
        "grade3": {
            "name": "grade 3",
            "id": "3",
            "categories": ["district1", "grade1"]
        }
    }
    "districts": {
        "district1": {
            "name": "district 1",
            "id": "1",
            "categories": ["school1", "grade2"]
        },
        "district2": {
            "name": "district 2",
            "id": "2",
            "categories": ["school2", "grade3"]
        },
        "district3": {
            "name": "district 3",
            "id": "3",
            "categories": ["district1", "grade1"]
        }
    }
}

因此，下拉菜单中的所有项目都将从您创建的JSON数组中引用（或者更好地使用您创建的JSON数组构建下拉菜单）

然后，根据用户选择的内容，对JS进行编码，以交叉引用

类别

数组。因此，如果用户选择

school1

，则只有

school1

对象的

categories

数组中存在的年级和地区才会显示给用户

---

这是您可能希望开始关注的方向

在StackOverflow和web中有很多例子。只要在谷歌上搜索一下，你就会发现很多教程。可能的副本是