0
请看看the following link.如何根据动态下拉选择显示YouTube视频？
那里你会找到一个动态的下拉菜单：
- 3个下拉领域;
- 在1日，需要选择第一个下拉列表中的“系列”;
- 在第二，第二下拉的“季节”需要被选择;
- 在第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>
......你会看到，第三下拉由两个可见的字段（因为尺寸已被设置为“2”，该下拉列表可滚动如何获得这第三下拉srollable时大小设置为“1”？任何想法如何实现？ –