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

Question

我想创建 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>

但是，我希望学校列表中显示的项目（连同值）取决于我选择的学区。除此之外，成绩单（连同价值观）取决于您选择的学校。最后，房屋清单（连同价值）需要取决于您选择的等级。我正在使用一个不支持附加组件的程序，因此代码需要是纯 html 和 javascript

Answer 1

这个问题有几个层次。但我基本上认为你想要研究的是根据选择的内容通过 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 代码以交叉引用 categories 数组。因此，如果用户选择school1，则只会向用户显示school1 对象的categories 数组中存在的年级和地区。

这是您可能想要开始寻找的方向。