链接下拉列表
链接下拉列表
提问于 2020-08-21 02:32:36
我正在用HTML/CSS/JavaScript做我的第一个项目。我精通Java和C语言。
我有一组图像，它们被分成多个级别的组/子组。在我展示它们之前，我需要使用DDL (下拉列表)选择组。我想显示第一个DDL，只有在选择之后，才会显示第二个DDL，依此类推。例如，我有一个包含组A、组B、组C的DDL，如果我选择组A，它将显示第二个DDL，选项为组AA、组AB。如果我选择AA组，它将显示第三个DDL。如果我选择AB组，则应该显示该组中的图片(因为AB组中没有子组)。我只需要最多3个级别(如图所示)。这些组是固定的，它们永远不会改变。
请记住，如果我在AAA组中，并且我将第一个DDL更改为B组，则第二个DDL应该重置(并更改其选项)，第三个DDL应该消失。
我如何才能做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-21 04:27:45
我做了一个小提琴来演示这个。希望这就是你想要实现的目标。小提琴非常基础，可以进行改进和重构，使其更具动态性/通用性
var optionAppendValues = ["A", "B", "C"];
function createTwo() {
var selectOneValue = document.getElementById('images_one').value;
var selectTwo = document.getElementById('images_two');
resetTwo();
resetThree();
if(selectOneValue !== "default") {
for (i = 0; i < 3; i++) {
var option = document.createElement("option");
option.text = "Group " + selectOneValue + optionAppendValues[i];
option.value = selectOneValue + optionAppendValues[i];
selectTwo.add(option);
}
selectTwo.style.display = "block";
}
}
function createThree() {
var selectTwoValue = document.getElementById('images_two').value;
var selectThree = document.getElementById('images_three');
resetThree();
if(selectTwoValue !== "default") {
for (i = 0; i < 3; i++) {
var option = document.createElement("option");
option.text = "Group " + selectTwoValue + optionAppendValues[i];
option.value = selectTwoValue + optionAppendValues[i];
selectThree.add(option);
}
selectThree.style.display = "block";
}
}
function resetTwo(){
var selectTwo = document.getElementById('images_two');
for (i = 3; i > 0; i--) {
var option = document.createElement("option");
selectTwo.remove(i);
}
selectTwo.style.display = "none";
}
function resetThree(){
var selectThree = document.getElementById('images_three');
for (i = 3; i > 0; i--) {
var option = document.createElement("option");
selectThree.remove(i);
}
selectThree.style.display = "none";
}#images_two, #images_three {
display:none;
margin-left: 55px;
margin-top: 5px
}<div class="container">
<label for="images_one">Images:</label>
<select name="images_one" id="images_one" onchange="createTwo()">
<option value="default">Please select...</option>
<option value="A">Group A</option>
<option value="B">Group B</option>
<option value="C">Group C</option>
</select>
<select name="images_two" id="images_two" onchange="createThree()">
<option value="default">Please select...</option>
</select>
<select name="images_three" id="images_three">
<option value="default">Please select...</option>
</select>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63511244
复制相关文章
相似问题
腾讯云开发者
