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