链接下拉列表

Question

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

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

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

我怎样才能做到这一点？

Answer 1

我做了一个 fiddle 来演示这个。希望这是你想要完成的。 fiddle 是非常基础的，可以改进和重构为 dynamic/generic

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>

链接下拉列表

Chaining Drop-Down Lists

html

javascript

drop-down-menu