Question

我正在用HTML / CSS / JavaScript做我的第一个项目。我精通Java和C。

我有一组图像，分为多级组/子组。在介绍它们之前，我需要使用DDL（下拉列表）选择组。我想显示第一个DDL，并且仅在选择之后显示第二个，依此类推。例如，我有一个带有[Group A，Group B，Group C]的DDL，如果我选择Group A，那么它将出现一个带有选项[Group AA，Group AB]的第二个DDL。如果我选择“ AA组”，那么它将显示第三个DDL。如果我选择AB组，则应显示该组中的图片（因为AB组中没有子组）。我最多只需要3个级别（如图所示）。这些组是固定的，它们永远不会改变。

请记住，如果我在AAA组中，并且将第一个DDL更改为B组，则第二个DDL应该重置（并更改其选项），而第三个DDL应该消失。

我该如何实现？

Answer 1

我做了一个小提琴来演示这个。希望这是您要实现的目标。小提琴非常基础，可以改进和重构，使其更具动态性/通用性

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>

链接下拉列表

1 个答案: