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

最佳答案

这个问题有几层。但是我基本上认为您想研究的是根据所选择的内容通过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,则只会向用户显示categories对象的school1数组中存在的成绩和地区。

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

关于javascript - 如何创建相互依赖的下拉列表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57949229/

10-12 12:41
查看更多