JavaScript将选择选项链接到代码片段

我是JavaScript新手，所以请耐心等待。最近几天我在网上搜索了一个解决方案，但没有找到。一个重要的原因是我不知道我应该寻找什么

话虽如此，对代码的帮助将是巨大的。如果您不想编写任何代码作为响应，但愿意为我指出解决问题的正确方向，那也太好了。

我想做的是：用户从第二个下拉框中选择一个选项，然后显示“显示我要去哪里”按钮。单击按钮时，顶部会显示一个div，其中嵌入一个视频，为他们提供方向

我的问题：我觉得我需要一个数组或某种对象来将选择选项链接到嵌入代码片段，以便放入directions_container div。我不知道如何将用户选择的选项链接到适当的代码片段。单击SHOW ME to GO按钮应该触发适当的代码片段要插入到div标记中的代码的数目

下面是我当前的项目代码

HTML

JavaScript

function check() {
    var dropdown = document.getElementById("TransactionType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "DH") {
        document.getElementById("DHOps").style.display = "block";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "Live") {
        document.getElementById("LUOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "LTL") {
        document.getElementById("LTLOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "FedEx") {
        document.getElementById("FEDEXOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "Visitor") {
        document.getElementById("VISITOROps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
}

function showbtn() {
  var childboxes = [
    document.getElementById("DHOps"),
    document.getElementById("LUOps"),
    document.getElementById("LTLOps"),
    document.getElementById("FEDEXOps"),
    document.getElementById("VISITOROps"),
  ];

  childboxes.forEach((childbox) => {
    if (childbox.onchange) {
      document.getElementById("submit").style.display = "block";
      
    }
  });
}

function provideDirections() {
var embed_directions = {}
  document.getElementById("directions_container").style.display = "block";
  

}

function close_div () {
document.getElementById("directions_container").style.display = "none";

}

---

我认为在数组/对象中有关于选择内容的数据是个好主意

我想这里有很多新的东西，但是请特别注意，数据项作为

itemdata

插入到option元素中。这是一个传递数据的技巧

var数据=[{
id:“1”，
标题：“备选方案1”，
子选项：[{
id:“1a”，
标题：“备选方案1a”
}, {
id:“1b”，
标题：“备选方案1b”
}]
},
{
id:“2”，
标题：“备选方案2”，
子选项：[{
身份证号码：“2a”，
标题：“备选方案2a”
}, {
id:“2b”，
标题：“备选方案2b”
}]
}
];
document.addEventListener（'DOMContentLoaded'，e=>{
document.forms.selection.addEventListener（'submit'，e=>{
e、 预防默认值（）；
console.log（e.target.first.value，e.target.second.value，“已选择”）
});
document.forms.selection.second.addEventListener（'change'，e=>{
document.forms.selection.button.disabled=false；
});
document.forms.selection.first.addEventListener（'change'，e=>{
设optVal=e.target.value；
让optElm=e.target.querySelector（`option[value='${optVal}']`）；
if（optElm）{
更新（optElm.itemdata.suboptions、document.forms.selection.second）；
}否则{
document.forms.selection.second.innderHTML=''；
document.forms.selection.second.disabled=true；
document.forms.selection.button.disabled=true；
}
});
更新（数据、文件、表格、选择、第一）；
});
常量更新=（数组，选择）=>{
select.innerHTML=''；
让opt=document.createElement（'OPTION'）；
选择.appendChild（opt）；
array.forEach（项=>{
让opt=document.createElement（'OPTION'）；
opt.value=item.id；
opt.innerText=item.title；
opt.itemdata=项目；
选择.appendChild（opt）；
});
select.disabled=false；
};

走！
看起来您对每个
当前值都在重复相同的代码，这是为什么？我只是在学习代码。虽然其他人可能知道如何减少大量代码以获得相同的结果，但我只是简单地经历并尝试以我所学到的知识为基础，以我知道的方式使每一点功能都能正常工作。对我来说，对事物的理解仍然很模糊，这就是为什么我要做一个项目来更好地理解事物。我不确定问题出在哪里。捕获选定的值，将它们作为对象插入数组并使用它们。让选项Selected=[]；optionSelected.push（{TransactionType:dropdown.value}）；让我困惑的是，我有几个下拉框（DHOps、LUOps、LTLOps、FEDEXOps和VISITOROps），每个框都有多个选项。如果这是一套选择，那就更直截了当了。再说一次，我只是在学习这些东西。不过我很欣赏这个方向。非常感谢。哇，比我所做的有了很大的改进！非常感谢你花时间把所有这些放在一起。我在数据对象中添加了示例嵌入代码作为视频。我尝试使用您的一些代码作为模板来添加事件侦听器，以便单击Go按钮。目的是通过从第二个选择框中选择的选项将视频嵌入代码插入到div HTML标记中。这不起作用，这并不奇怪，因为这一切都让我感到头晕目眩。这是JS提琴：@bruntonomo在第34-36行我添加了代码，用于将视频插入到directions_容器div：几乎完美！我看到，如果用户在视频显示后更改选项，它将显示另一个视频。如何仅根据第二个框中的选项显示视频（隐藏初始选择的视频）？如果用户更改第一个框的选择，视频也应该消失。我知道如何使用CSS和JavaScript显示/隐藏，但只能使用特定元素。@bruntonomo好的，这有点粗糙，但它可以工作：你可以看到我搜索iframe并设置outHTML=“”-这将删除iframe。太棒了！非常感谢你在这方面的帮助！正如你所知道的，我花了时间浏览了代码，并试图理解其内部工作原理。我读了它，觉得我明白你在做什么，但当我需要修改代码时，我显然对事情没有很好的理解。我订了几本今天送来的编码书。希望我能学习和发展成为像你这样有知识的人。再次感谢你！
#directions_container {
  z-index: 1;
  background-color: #FFFFFF;
  display: none;
  position: absolute;
  width: 500px;
  height: 300px;
}

function check() {
    var dropdown = document.getElementById("TransactionType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "DH") {
        document.getElementById("DHOps").style.display = "block";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "Live") {
        document.getElementById("LUOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "LTL") {
        document.getElementById("LTLOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "FedEx") {
        document.getElementById("FEDEXOps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("VISITOROps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
    if (current_value == "Visitor") {
        document.getElementById("VISITOROps").style.display = "block";
        document.getElementById("DHOps").style.display = "none";
        document.getElementById("LUOps").style.display = "none";
        document.getElementById("LTLOps").style.display = "none";
        document.getElementById("FEDEXOps").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
}

function showbtn() {
  var childboxes = [
    document.getElementById("DHOps"),
    document.getElementById("LUOps"),
    document.getElementById("LTLOps"),
    document.getElementById("FEDEXOps"),
    document.getElementById("VISITOROps"),
  ];

  childboxes.forEach((childbox) => {
    if (childbox.onchange) {
      document.getElementById("submit").style.display = "block";
      
    }
  });
}

function provideDirections() {
var embed_directions = {}
  document.getElementById("directions_container").style.display = "block";
  

}

function close_div () {
document.getElementById("directions_container").style.display = "none";

}