Html 如何使用级联下拉列表中的最后一个选择作为src变量_Html_Variables_Iframe

Html 如何使用级联下拉列表中的最后一个选择作为src变量

html variables iframe

Html 如何使用级联下拉列表中的最后一个选择作为src变量,html,variables,iframe,Html,Variables,Iframe,我希望我能解释清楚。所以我有一个3级级联下拉列表。无论最后一个下拉列表中选择了什么，都需要链接到唯一的utube视频。我有下拉菜单，我有一个go按钮，可以打开一个iframe到一个utube链接。在这里的例子中：用户在第一个下拉列表中选择米高梅，在第二个下拉列表中选择BAL，然后在第三个下拉列表中选择“8”。我需要每个选择引用一个视频链接-所以 “8”=utubevid1 那么变量URL将=utubevid1 然后src=URL 所以只需将第三个选项设置为变量，相当于某个url <!DO

我希望我能解释清楚。所以我有一个3级级联下拉列表。无论最后一个下拉列表中选择了什么，都需要链接到唯一的utube视频。我有下拉菜单，我有一个go按钮，可以打开一个iframe到一个utube链接。在这里的例子中：

用户在第一个下拉列表中选择米高梅，在第二个下拉列表中选择BAL，然后在第三个下拉列表中选择“8”。我需要每个选择引用一个视频链接-所以 “8”=utubevid1

那么变量URL将=utubevid1 然后src=URL

所以只需将第三个选项设置为变量，相当于某个url

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var startObject = {
  "MGM": {
    "CRZ": ["3", "4", "5"],
    "BAL": ["6", "7", "8",],
  },
  "BAL": {
    "CRZ": ["Variables", "Strings", "Arrays"],
  }
}
window.onload = function() {
  var startSel = document.getElementById("start");
  var endSel = document.getElementById("end");
  var optionsSel = document.getElementById("options");
  for (var x in startObject) {
    startSel.options[startSel.options.length] = new Option(x, x);
  }
  startSel.onchange = function() {
    //empty end- and options- dropdowns
    optionsSel.length = 1;
    endSel.length = 1;
    //display correct values
    for (var y in startObject[this.value]) {
      endSel.options[endSel.options.length] = new Option(y, y);
    }
  }
  endSel.onchange = function() {
    //empty options dropdown
    optionsSel.length = 1;
    //display correct values
    var z = startObject[startSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      optionsSel.options[optionsSel.options.length] = new Option(z[i], z[i]);
    }
  }
}
</script>
</head>   
<body>

<h1>Pick a video!</h1>

<form name="form1" id="form1" action="/action_page.php">
Sarting point: <select name="start" id="start">
    <option value="" selected="selected">Choose a starting location</option>
  </select>
  <br><br>
Ending point: <select name="end" id="end">
    <option value="" selected="selected">Please select starting point first</option>
  </select>
  <br><br>
Options: <select name="options" id="options">
    <option value="" selected="selected">Please select destination first</option>
  </select>
  <br><br>
 
</form>

<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">go</button></p>
  <div id="youtube-frame"></div>
  </div>
</div>
</body>

<script>
function play1() { 
    var frame = document.getElementById("youtube-frame");
    frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
  }
</script>


</body>
</html>


var startObject={
“米高梅”：{
“CRZ”：[“3”、“4”、“5”]，
“余额”：[“6”、“7”、“8”、]，
},
“BAL”：{
“CRZ”：[“变量”、“字符串”、“数组”]，
}
}
window.onload=函数（）{
var startSel=document.getElementById（“开始”）；
var endSel=document.getElementById（“结束”）；
var optionsSel=document.getElementById（“选项”）；
用于（startObject中的var x）{
startSel.options[startSel.options.length]=新选项（x，x）；
}
startSel.onchange=函数（）{
//空结束-和选项-下拉列表
选项SEL.length=1；
endSel.length=1；
//显示正确的值
for（startObject[this.value]中的变量y）{
endSel.options[endSel.options.length]=新选项（y，y）；
}
}
endSel.onchange=函数（）{
//空选项下拉列表
选项SEL.length=1；
//显示正确的值
var z=startObject[startSel.value][this.value]；
对于（变量i=0；i

结束点：
请先选择起点



选项：
请先选择目的地




函数play1（）{
var frame=document.getElementById（“youtube框架”）；
frame.innerHTML+=“”；
}