Question

在那里你会找到一个动态下拉菜单：

有3个下拉字段;
在第1天，需要选择第一个下拉列表中的“系列”;
在第2位，需要选择第2次下拉中的“赛季”;
在第3位，可以选择第3个下拉列表中的“剧集”。此外，前一个和下一个按钮允许在第三个下拉列表中向后/向前步进。

我正在努力完成以下两项。

我想将特定的剧集与特定的变量相关联，这些变量与特定的（11位数）YouTube视频ID相对应，
我希望iframe能够在动态下拉菜单中显示与所选系列季节剧集相关的特定Youtube视频。

如何安排？任何建议都非常感谢。

请在下面找到我一直使用的代码。

<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 你可以找到它HERE

然后，当您填充“剧集”下拉菜单时，请将值设为11位数视频ID

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

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

javascript:loadNewVideo('Q6IEtjaSGHg');

    function loadNewVideo(id, startSeconds) {
        ytplayer.loadVideoById(id, parseInt(startSeconds));

    }

Answer 2

在这个社区和罗纳德的帮助下，我能够找到一些有用的答案。可以看到并运行工作解决方案via this link ...

对于一个工作示例，请选择：

第一次下拉：选择“Feuerwehrmann Sam”
第二次下拉：选择“Saison 8 - 2012”或“Saison 9 - 2014”
第3次下拉：选择您选择的剧集。

请在下面找到这个工作脚本：

<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>

如何根据动态下拉菜单选择显示YouTube视频？

2 个答案: