如何根据动态下拉列表选择显示YouTube视频

Question

我在动态下拉菜单上工作：

• 有3个下拉字段;
• 在第一个下拉中的"系列"中，需要选择一个"系列"；
• 需要选择第二个下拉列表中的"季节"；
• 在第三名，可以选择第三次下拉中的"情节"。

此外，上一个和下一个按钮允许在第三次下拉列表中向后/向前。

我在以下两个项目中挣扎。

1. 我想将特定情节链接到特定变量，与特定(11位(YouTube视频ID相对应，
2. 我希望iframe在动态下拉菜单中显示与所选的系列季节情节有关的特定YouTube-Video。

如何安排？

请在我到目前为止一直使用的代码下面找到。

<style>
.serie {
width: 200px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
margin-top: 5px;        
margin-left: 0px;
color:#000000;
background: #F3FED0;
border: 2px solid #92AD34;
}
.seizoen {
width: 180px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
margin-top: 2px;        
margin-left: 0px;
color:#000000;
background: #F3FED0;
border: 2px solid #92AD34;
}
.aflevering {
width: 210px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
margin-top: 2px;        
margin-left: 0px;
color:#000000;
background: #F3FED0;
border: 2px solid #92AD34;
}
.wrap {
text-align:center;
margin-top: 10px; 
}
#div1 {
display: inline-block;
border: 2px solid red;
float: left;
}
#div2 {
display: inline-block;
text-align: center;
border: 0px solid green;
}
#div3 {
display: inline-block;
border: 2px solid blue;
position: relative;
float: right;
}
select.center {
position: relative;
display: inline-block;
}
input.right {
position: relative;
float: right;
}
</style>
<iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0"  width="100%" height="450" related="0" allowfullscreen scrolling="no"></iframe>
<div class="wrap">
<div id="div1"><input type="button" value="vorige" onClick="nextTiles(-1)"></div>
<div id="div2">
<form name="myform" id="myForm">
    <select class="serie" name="optone" id="seriesSel" size="1">
    <option value="" selected="selected">Kies de serie</option>
    </select>
    <select class="seizoen" name="opttwo" id="seasonSel" size="1">
    <option value="" selected="selected">Kies eerst de serie</option>
    </select>
    <select class="aflevering overlaySelector" id="episodeSel" name="optthree" size="1">
    <option value="" selected="selected">Kies eerst het seizoen</option>
    </select>
    </form>
</div>
<div id="div3"><input type="button" class="right" value="volgende" onClick="nextTiles(1)"></div>
</div>

<script language=javascript>
function setIframeSource() {
//do whatever you're doing
;
}
function nextTiles(i) {
var e = document.getElementsByClassName("overlaySelector")[0];
e.selectedIndex +=i ;
//loop-around from the top or bottom depending on increment/decrement
if(e.selectedIndex == -1) {
if(i>0) e.selectedIndex = 0;
else e.selectedIndex = e.length - 1;
}
setIframeSource(); //with the now updated selected option,
//do whatever you were doing when the user manually chooses something in the dropdown
}
var seriesObject = {
    "Donald Duck": {
        "Seizoen 2004": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4"],
        "Seizoen 2005": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6"]
    },
    "Bob de Bouwer": {
        "Seizoen 2011": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7"],
        "Seizoen 2012": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"]
    },
    "Brandweerman Sam": {
        "Seizoen 2009": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7"],
        "Seizoen 2010": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"],
        "Seizoen 2011": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"],
        "Seizoen 2012": ["aflevering 1", "aflevering 2", "aflevering 3", "aflevering 4", "aflevering 5", "aflevering 6", "aflevering 7", "aflevering 8", "aflevering 9"]
    }
}
window.onload = function () {
    var seriesSel = document.getElementById("seriesSel"),
        seasonSel = document.getElementById("seasonSel"),
        episodeSel = document.getElementById("episodeSel");
    for (var series in seriesObject) {
        seriesSel.options[seriesSel.options.length] = new Option(series, series);
    }
    seriesSel.onchange = function () {
        seasonSel.length = 1; // remove all options bar first
        episodeSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          seasonSel.options[0].text = "Kies eerst de serie"
          episodeSel.options[0].text = "Kies eerst het seizoen"
          return; // done   
        }  
        seasonSel.options[0].text = "Kies het seizoen"
        for (var season in seriesObject[this.value]) {
            seasonSel.options[seasonSel.options.length] = new Option(season, season);
        }
        if (seasonSel.options.length==2) {
          seasonSel.selectedIndex=1;
          seasonSel.onchange();
        }     
    }
    seriesSel.onchange(); // reset in case page is reloaded
    seasonSel.onchange = function () {
        episodeSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          episodeSel.options[0].text = "Kies eerst het seizoen"
          return; // done   
        }  
        episodeSel.options[0].text = "Kies de aflevering"
        var cities = seriesObject[seriesSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            episodeSel.options[episodeSel.options.length] = new Option(cities[i], cities[i]);
        }
        if (episodeSel.options.length==2) {
          episodeSel.selectedIndex=1;
          episodeSel.onchange();
        }   
    }
}
</script>

Answer 1

首先您需要使用iframe api。
您可以在这里找到它

然后，当您填充"情节"下拉列表时，使值11位视频ID

<option value="Q6IEtjaSGHg">aflevering 2</option>

然后在代码中您可以将其发送给播放器

javascript:loadNewVideo('Q6IEtjaSGHg');
    function loadNewVideo(id, startSeconds) {
        ytplayer.loadVideoById(id, parseInt(startSeconds));
    }

Answer 2

有了一点 - 但很重要 - 从这个社区和罗纳德(Ronald(的帮助，我能够找到一些工作答案。

对于工作示例，请选择：

• 第1个下拉列表：选择" feuerwehrmann sam"
• 第二次下拉：选择" Saison 8-2012"或" Saison 9-2014"
• 第三次下拉：选择您选择的情节。

请在下面找到此工作脚本：

<style>
.serie {
width: 200px;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
margin-top: 5px;        
margin-left: 0px;
color:#525e66;
background: #F3FED0;
border: 2px solid #92AD34;
}
.seizoen {
width: 210px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
margin-top: 2px;        
margin-left: 0px;
color:#525e66;
background: #F3FED0;
border: 2px solid #92AD34;
}
.aflevering {
width: 222px;
font-weight: normal;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
margin-top: 2px;        
margin-left: 0px;
color:#525e66;
background: #F3FED0;
border: 2px solid #92AD34;
}
.wrap1 {
text-align:center;
margin-top: 10px; 
width: 100%;
}
.wrap2 {
text-align:center;
margin-top: 10px; 
width: 100%;
}
#div1 {
display: inline-block;
border: 2px solid red;
float: left;
}
#div2 {
display: inline-block;
text-align: center;
border: 0px solid green;
}
#div3 {
display: inline-block;
border: 2px solid blue;
position: relative;
float: right;
}
.div4 {
width: 642px;
font-size: 100%;
font-weight: bold;
font-family: Verdana;   
text-align: center;
display: inline-block;
margin-top: 0px;
margin-left: 3px;
background: #F3FED0;        
border: 2px solid #92AD34;
float: center;
select.center {
position: relative;
display: inline-block;
}
input.right {
position: relative;
float: right;
}
</style>
<iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0"  width="100%" height="510" related="0" allowfullscreen scrolling="no"></iframe>
<div class="wrap1">
<div id="div1"><input type="button" value="zurück" onClick="nextTiles(-1)"></div>
<div id="div2">
<form name="myform" id="myForm">
    <select class="serie" name="optone" id="seriesSel" size="1">
    <option value="" selected="selected">Wähle die Serie</option>
    </select>
    <select class="seizoen" name="opttwo" id="seasonSel" size="1">
    <option value="" selected="selected">Wähle zuerst die Serie</option>
    </select>
    <select class="scrolly aflevering overlaySelector" id="episodeSel" name="optthree" size="2">
    <option value="" selected="selected">Wähle zuerst die Saison</option>
    </select>
    </form>
</div>
<div id="div3"><input type="button" class="right" value="weiter" onClick="nextTiles(1)"></div>
</div>
<div class="wrap2">
<div id="myTitle" class="div4">Name der Episode</div>
</div>



<script language=javascript>
function setIframeSource(aCode) {
  if (aCode.length >= 11){
    YouTubeCode = aCode.substr(0,11);
    Titel = aCode.substr(11)
  document.getElementById("myIframe").src="https://www.youtube.com/embed/"+YouTubeCode+"?rel=0&fs=0&autoplay=1&modestbranding=1";
    Omschrijving = aCode.substr(11).split(", "); 
    document.getElementById("myTitle").innerHTML = ""+Omschrijving[3];
  }  
}
var seriesObject = {
    "Donald Duck": {
        "Seizoen 2004": ["afl 1", "afl 2", "afl 3", "afl 4"],
        "Seizoen 2005": ["afl 1", "afl 2", "afl 3", "afl 4", "afl 5", "afl 6"]
    },
    "Bob de Bouwer": {
        "Seizoen 2011": ["afl 1", "afl 2", "afl 3", "afl 4", "afl 5", "afl 6", "afl 7"],
        "Seizoen 2012": ["afl 1", "afl 2", "afl 3", "afl 4", "afl 5", "afl 6", "afl 7", "afl 8", "afl 9"]
    },
    "Feuerwehrmann Sam": {
        "Saison 1: 1987": ["Z9dN-YJE7Ek Brandweerman Sam, 1: 1987, 1, Der Drachen", 
                         "-E4_JlaCr_U Brandweerman Sam, 1: 1987, 2, Der Scheunenbrand",
                         "6rpu32dfl_s Brandweerman Sam, 1: 1987, 3, Die Feuerwehrübung",
                         "P5nPw5qXBCo Brandweerman Sam, 1: 1987, 4, Die Reifenpanne",
                         "VFAEBbva454 Brandweerman Sam, 1: 1987, 5, Uit kamperen / Kamperen",
                         "KBKQ-a28YVw Brandweerman Sam, 1: 1987, 6, Norman macht Dummheiten", 
                         "fLHv3AiueWQ Brandweerman Sam, 1: 1987, 7, Die verschwundene Katze",
                         "jhOwSuMm2O4 Brandweerman Sam, 1: 1987, 8, Televisietoestanden / De commandant wordt beroemd"],
        "Seizoen 2009": ["afl1", "afl2", "afl 3", "afl 4", "afl 5", "afl6", "afl7"],
        "Seizoen 2010": ["afl1", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "afl 17", "afl 18", "afl 19"],
        "Seizoen 2011": ["afl 1", "afl 2", "afl 3", "afl 4", "afl 5", "afl 6", "afl 7", "afl 8", "afl 9"],
        "Saison 8 - 2012": ["mKUR5kBxcds Feuerwehrmann Sam, 2012, 01, Gwendolyns millionster Kunde",
                        "n1PCPV81oMo Feuerwehrmann Sam, 2012, 02, Norman erobert Jupiter",
                        "2SfJBjCHwfI Feuerwehrmann Sam, 2012, 03, Ein Schal für den Schneemann",
                        "LYdjgYSehOk Feuerwehrmann Sam, 2012, 04, Besserwisser Boyce",
                        "Bx6EBMg8bwM Feuerwehrmann Sam, 2012, 05, Elvis und die Riesengitarre",
                        "piMV785edvE Feuerwehrmann Sam, 2012, 06, Mandy in Seenot",
                        "1pAILBw_1Eo Feuerwehrmann Sam, 2012, 07, Norris das Meerschweinchen",
                        "OP5O6OEAv6c Feuerwehrmann Sam, 2012, 08, Sam und der Eisbär",
                        "sPgCF52lRnY Feuerwehrmann Sam, 2012, 09, Großes Tamtam für den neuen Bahnhof",
                        "YWIA1GI2Tt4 Feuerwehrmann Sam, 2012, 10, Verschollen auf dem Pontypandy-Berg",
                        "Vdop8ao43xU Feuerwehrmann Sam, 2012, 11, Gefahr im Pontypandy-Express",
                        "dgsGsOnO1ds Feuerwehrmann Sam, 2012, 12, Das Monster von Pontypandyness",
                        "HExQMU_Vd8A Feuerwehrmann Sam, 2012, 13, Dilys die Seeplage",
                        "bu3A_XatIIo Feuerwehrmann Sam, 2012, 14, Frostige Zeiten in Pontypandy",
                        "tcxf_Cg3hns Feuerwehrmann Sam, 2012, 15, Normans Halloween Trick",
                        "Zt7ip1XAjAc Feuerwehrmann Sam, 2012, 16, Brüder durch dick und dünn",
                        "BWbXLlfAoBw Feuerwehrmann Sam, 2012, 17, Bessie eilt zur Rettung",
                        "E2Wef9mg5OY Feuerwehrmann Sam, 2012, 18, Norman und das Snowboard",
                        "OEEQPOKguJs Feuerwehrmann Sam, 2012, 19, König der Berge",
                        "d9TM5aomVk4 Feuerwehrmann Sam, 2012, 20, Gefangen auf dem Leuchtturm",
                        "GykXc5JbAmM Feuerwehrmann Sam, 2012, 21, Lichterkettenwettkampf",
                        "S2Fl9TXFth8 Feuerwehrmann Sam, 2012, 22, Babysitter in Not",
                        "Ta61rBU1AMM Feuerwehrmann Sam, 2012, 23, Bessie in Gefahr",
                        "_aB3PMNm5rI Feuerwehrmann Sam, 2012, 24, Schlauer als ein Fuchs",
                        "eLp_f5nJTOM Feuerwehrmann Sam, 2012, 25, Lily ist verschwunden",
                        "WBEyjhXAwP0 Feuerwehrmann Sam, 2012, 26, Auf und davon"],
        "Saison 9 - 2014": ["tXYFGWVuKS4 Feuerwehrmann Sam, 2014, 01, Feuer auf See", 
                        "EDCdFVpxZY4 Feuerwehrmann Sam, 2014, 02, Fußball gegen Wissenschaft",
                        "0vbkyHKlJv0 Feuerwehrmann Sam, 2014, 03, Das große Käse Wettrollen",
                        "Tfbtiw8r6TE Feuerwehrmann Sam, 2014, 04, Auf dünnem Eis",
                        "bvSt3juX6F8 Feuerwehrmann Sam, 2014, 05, Der zauberhafte Normansky",
                        "zmp5AqnqZQY Feuerwehrmann Sam, 2014, 06, SOS auf Pontypandy Eiland",
                        "EDCdFVpxZY4 Feuerwehrmann Sam, 2014, 07, Fußball gegen Wissenschaft",
                        "wFVjYfnupHw Feuerwehrmann Sam, 2014, 08, Die beste Pyjamaparty aller Zeiten",
                        "-jQmkMGCYCo Feuerwehrmann Sam, 2014, 09, Wal in Sicht",
                        "PAkQiDCKjqk Feuerwehrmann Sam, 2014, 10, Lämmchen fliegt davon",
                        "dSlv0C8WRnc Feuerwehrmann Sam, 2014, 11, Das supergruselige Frostmonster",
                        "GVBwSYWig_A Feuerwehrmann Sam, 2014, 12, Der Pontypandy GoKart Cup",
                        "GZir90hrFrI Feuerwehrmann Sam, 2014, 13, Balance auf dem Baumhaus",
                        "yqS3xuYMIU0 Feuerwehrmann Sam, 2014, 14, Wer schafft den Rekord",
                        "0MelBFNApJQ Feuerwehrmann Sam, 2014, 15, Die Feuerwand",
                        "9f_6vC7_jDE Feuerwehrmann Sam, 2014, 16, Gefangen in der Schlucht",
                        "_yKxo-1UmSQ Feuerwehrmann Sam, 2014, 17, Mandy und die Seeschildkröte",
                        "RkcLQu6zOmc Feuerwehrmann Sam, 2014, 18, Der Schatz von Pontypandy Pete",
                        "BAnd6Kz3b0I Feuerwehrmann Sam, 2014, 19, Verirrt in den Pontypandy Bergen",
                        "dLWbsC4qTZ8 Feuerwehrmann Sam, 2014, 20, Hund gegen Katze",
                        "U61LowGENtU Feuerwehrmann Sam, 2014, 21, Ameisenalarm",
                        "Y5HVu9uN5uE Feuerwehrmann Sam, 2014, 22, Die Liebesboten",
                        "eMccjfxg20A Feuerwehrmann Sam, 2014, 23, Bühne frei für Feuerwehrmann Sam",
                        "3o3Sd3Nc-5E Feuerwehrmann Sam, 2014, 24, Eine explosive Mischung",
                        "YCHgQRoOg4g Feuerwehrmann Sam, 2014, 25, Norman Man und Atomic Boy"]
    }
}
function nextTiles(i) {
  var e = document.getElementsByClassName("overlaySelector")[0];
      seriesSel = document.getElementById("seriesSel"),
      seasonSel = document.getElementById("seasonSel"),
      episodeSel = document.getElementById("episodeSel");
  e.selectedIndex +=i ;
  //loop-around from the top or bottom depending on increment/decrement
  if(e.selectedIndex == -1) {
    if(i>0) e.selectedIndex = 0;
    else e.selectedIndex = e.length - 1;
  }
//  setIframeSource(); //with the now updated selected option,
////do whatever you were doing when the user manually chooses something in the dropdown
  var codes = seriesObject[seriesSel.value][seasonSel.value];
  if (episodeSel.selectedIndex <= codes.length) {
    setIframeSource(codes[episodeSel.selectedIndex-1]);
  }
}
window.onload = function () {
    var seriesSel = document.getElementById("seriesSel"),
        seasonSel = document.getElementById("seasonSel"),
        episodeSel = document.getElementById("episodeSel");
    for (var series in seriesObject) {
        seriesSel.options[seriesSel.options.length] = new Option(series, series);
    }
    seriesSel.onchange = function () {
        seasonSel.length = 1; // remove all options bar first
        episodeSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          seasonSel.options[0].text = "Wähle zuerst die Serie"
          episodeSel.options[0].text = "Wähle zuerst die Saison"
          return; // done   
        }  
        seasonSel.options[0].text = "Wähle die Saison"
        for (var season in seriesObject[this.value]) {
            seasonSel.options[seasonSel.options.length] = new Option(season, season);
        }
        if (seasonSel.options.length==2) {
          seasonSel.selectedIndex=1;
          seasonSel.onchange();
        }     
    }
    seriesSel.onchange(); // reset in case page is reloaded
    seasonSel.onchange = function () {
        episodeSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          episodeSel.options[0].text = "Wähle zuerst die Saison"
          return; // done   
        }  
        episodeSel.options[0].text = "Wähle die Episode"
        var episodes = seriesObject[seriesSel.value][this.value];
        for (var i = 0; i < episodes.length; i++) {
            if (episodes[i].length >=11){
              episodeSel.options[episodeSel.options.length] = new Option('Episode '+(i+1), episodes[i]);
            }
        }
        if (episodeSel.options.length==2) {
          episodeSel.selectedIndex=1;
          episodeSel.onchange();
        }   
    }
    episodeSel.onchange = function () {
      if (episodeSel.selectedIndex > 0) {
        var codes = seriesObject[seriesSel.value][seasonSel.value];
        if (this.selectedIndex <= codes.length) {
          aCode = codes[this.selectedIndex-1];
          setIframeSource(aCode);
        }
      }
    }            
}
</script>