使下拉菜单使用上一个下拉列表的值

<!-- HTML代码 -->
<select id="firstDropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<select id="secondDropdown">
  <!-- 第二个下拉菜单的选项将根据第一个下拉菜单的选择动态更新 -->
</select>

<script>
  // JavaScript代码
  var firstDropdown = document.getElementById("firstDropdown");
  var secondDropdown = document.getElementById("secondDropdown");

  // 监听第一个下拉菜单的变化事件
  firstDropdown.addEventListener("change", function() {
    // 清空第二个下拉菜单的选项
    secondDropdown.innerHTML = "";

    // 根据第一个下拉菜单的值来更新第二个下拉菜单的选项
    if (firstDropdown.value === "option1") {
      var option1 = document.createElement("option");
      option1.value = "option1-1";
      option1.text = "选项1-1";
      secondDropdown.add(option1);
      
      var option2 = document.createElement("option");
      option2.value = "option1-2";
      option2.text = "选项1-2";
      secondDropdown.add(option2);
    } else if (firstDropdown.value === "option2") {
      var option3 = document.createElement("option");
      option3.value = "option2-1";
      option3.text = "选项2-1";
      secondDropdown.add(option3);
      
      var option4 = document.createElement("option");
      option4.value = "option2-2";
      option4.text = "选项2-2";
      secondDropdown.add(option4);
    } else if (firstDropdown.value === "option3") {
      var option5 = document.createElement("option");
      option5.value = "option3-1";
      option5.text = "选项3-1";
      secondDropdown.add(option5);
      
      var option6 = document.createElement("option");
      option6.value = "option3-2";
      option6.text = "选项3-2";
      secondDropdown.add(option6);
    }
  });
</script>