0
動的ドロップダウンメニューができますがありthe following link.ダイナミックドロップダウン選択に基づいてYouTube動画を表示する方法は？
を見てください：3つのドロップダウンフィールドで
- を。
- ここで、1stでは、最初のドロップダウンの「シリーズ」を選択する必要があります。
- 2番目のドロップダウンの「シーズン」を選択する必要があります。
- ここで、3番目のドロップダウンの「エピソード」を選択できます。 さらに、前と次のボタンは、3番目のドロップダウンで前後に踏み込むことができます。
私は次の2つの項目で苦労しています。
- Iは、YouTube動画IDの私が選択に関する特定のYouTubeのビデオを表示するためのiframeを希望
- 、特異的に対応する固有の変数（11桁）に特定のエピソードをリンクしますシリーズのシーズン - エピソードをダイナミックなドロップダウンメニューに表示します。
これはどのように配置できますか？ どのような提案も高く評価されています。
私はsofarを使用しているコードを以下で見つけてください。
<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つの可視フィールド（で構成されていこの3番目のドロップダウンを取得する方法は、サイズが「1」に設定されているときにスクロール可能ですか？ –