【发布时间】：2017-10-04 10:10:25
【问题描述】：
我正在开发一个动态下拉菜单：
- 带有 3 个下拉字段；
- 首先，需要选择第一个下拉列表中的“系列”；
- 在第 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>
【问题讨论】：
-
我已经从这个问题中删除了一个返回 404（已删除）的链接。这是不幸的，因为问题相当依赖于那里的任何东西。此外，自我回答可能非常有帮助，但它所依赖的链接也已失效（404）。我现在会投票结束这个问题，但如果你能修复问题，让他们不需要链接，那将是理想的。
标签： javascript dynamic drop-down-menu youtube